第四篇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分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python操作excel的方法
2018/08/16 Python
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
小学生国旗下演讲稿
2014/04/25 职场文书
特教教师先进事迹
2014/05/21 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
计算机实训报告总结
2014/11/05 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
先进个人材料怎么写
2014/12/30 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
综合测评个人总结
2015/03/03 职场文书
房屋所有权证明
2015/06/19 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android