第四篇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 相关文章推荐
jQuery $.each的用法说明
Mar 22 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
js实现移动端图片滑块验证功能
Sep 29 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
Vue实现todo应用的示例
Feb 20 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
德劲1103二次变频版的打磨
2021/03/02 无线电
cache_lite试用
2007/02/14 PHP
php之字符串变相相减的代码
2007/03/19 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
Python实现进程同步和通信的方法
2018/01/02 Python
django中send_mail功能实现详解
2018/02/06 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python Tkinter版学生管理系统
2019/02/20 Python
python实现字符串加密成纯数字
2019/03/19 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
商务专员岗位职责
2013/11/23 职场文书
高中生班主任评语
2014/04/25 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
Python中glob库实现文件名的匹配
2021/06/18 Python
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python