第四篇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 面向对象编程 function也是类
Sep 17 Javascript
javascript 特性检测并非浏览器检测
Jan 15 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
Javascript学习指南
Dec 01 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 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 printf输出格式使用说明
2010/12/05 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
php实现源代码加密的方法
2015/07/11 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
JS常见算法详解
2017/02/28 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
工会工作个人总结
2015/03/03 职场文书
思品教学工作总结
2015/08/10 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL