第四篇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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
vue-router中hash模式与history模式的区别
Jun 23 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中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
js实现弹窗效果
2020/08/09 Javascript
python中的函数用法入门教程
2014/09/02 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
pytorch 共享参数的示例
2019/08/17 Python
python 中xpath爬虫实例详解
2019/08/26 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
《月球之谜》教学反思
2014/04/10 职场文书
企业投资意向书
2015/05/09 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python