第四篇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对象的property和prototype是什么一种关系
Aug 06 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
jQuery实现文档树效果
Feb 20 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
第三篇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设计模式 Command(命令模式)
2011/06/26 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python检测QQ在线状态的方法
2015/05/09 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
为什么python比较流行
2020/06/19 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
企业员工薪酬方案
2014/06/04 职场文书
机关工会工作总结2015
2015/05/26 职场文书
PHP正则表达式之RCEService回溯
2022/04/11 PHP
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python