第四篇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 相关文章推荐
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
用js编写留言板
Mar 17 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 Cookie的使用教程详解
2013/06/03 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
传智播客学习之java 反射
2009/11/22 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
详解JS数值Number类型
2018/02/07 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
详解Python3注释知识点
2019/02/19 Python
浅谈python标准库--functools.partial
2019/03/13 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
研究生自我鉴定范文
2013/10/30 职场文书
房产继承公证书
2014/04/09 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
工作保证书怎么写
2015/02/28 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书