第四篇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 相关文章推荐
js 窗口抖动示例
Sep 04 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
layui 表单标签的校验方法
Sep 04 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
php经典趣味算法实例代码
2020/01/21 PHP
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
你应该知道的python列表去重方法
2017/01/17 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
进程的查看和调度分别使用什么命令
2015/03/25 面试题
个人求职简历的自我评价范文
2013/10/09 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
王老吉广告词
2014/03/20 职场文书
银行贷款承诺书
2014/03/29 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
革命电影观后感
2015/06/18 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
带你了解Java中的ForkJoin
2022/04/28 Java/Android
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python