第四篇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 日期计算算法
Sep 11 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 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过滤危险html代码
2008/08/18 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
jQuery操作css样式
2017/05/15 jQuery
vue-music关于Player播放器组件详解
2017/11/28 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python实现堆排序的方法详解
2016/05/03 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
python解决字符串倒序输出的问题
2018/06/25 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
python中温度单位转换的实例方法
2020/12/27 Python
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
夜班门卫岗位职责
2013/12/09 职场文书
自荐信格式简述
2014/01/25 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL
Web应用开发TypeScript使用详解
2022/05/25 Javascript