第四篇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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python下载网络小说实例代码
2018/02/03 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python+logging+yaml实现日志分割
2019/07/22 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
教师求职信范文分享
2013/12/27 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
安全教育的主题班会
2015/08/13 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS