第四篇Bootstrap网格系统偏移列和嵌套列


Posted in Javascript onJune 21, 2016

偏移列:

在bootstrap网格系统中我们可以使用偏移列来达到让某列右移的效果,如下所示:

<div>
<div>col2</div>
</div>

Class=”col-sm-2 col-sm-offset-1”表示该列占两份,并且往右移动一份,看到的效果如下:

第四篇Bootstrap网格系统偏移列和嵌套列

Col-sm-offset-1表示右移一份。Col-sm-offset-2表示右移两份依次类推。Col-xs类不支持偏移列,但是它可以通过简单的使用一个空的单元格来达到效果。

嵌套列:

我们可以在内容中嵌套网格,如下所示:

<div>
<div>
<div>
<div>col</div>
<div>col</div>
</div>
</div>
<div>
<div>
<div>col3</div>
<div>col4</div>
</div>
</div>

外层是一个一行两列的网格,第一列占4份,第二列占8份,在第一列中又嵌套了一个一行两列的网格,第一列占2份,第二列占10份。显示效果如下:

第四篇Bootstrap网格系统偏移列和嵌套列

以上所述是小编给大家介绍的第四篇Bootstrap网格系统偏移列和嵌套列的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
javascript函数中的arguments参数
Aug 01 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
第三篇Bootstrap网格基础
Jun 21 #Javascript
Bootstrap三种表单布局的使用方法
Jun 21 #Javascript
第二篇Bootstrap起步
Jun 21 #Javascript
基于zepto.js简单实现上传图片
Jun 21 #Javascript
第一篇初识bootstrap
Jun 21 #Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 #Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 #Javascript
You might like
php的curl实现get和post的代码
2008/08/23 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
详解Python字符串对象的实现
2015/12/24 Python
Python中单例模式总结
2018/02/20 Python
Python Grid使用和布局详解
2018/06/30 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
10张动图学会python循环与递归问题
2021/02/06 Python
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
导游词之山东孔庙
2019/11/04 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
React自定义hook的方法
2022/06/25 Javascript