第四篇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 中文字符串处理额外注意事项
Nov 15 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
js实现进度条的方法
Feb 13 Javascript
原生JS实现幻灯片
Feb 22 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
咖啡与牛奶
2021/03/03 冲泡冲煮
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
laravel请求参数校验方法
2019/10/10 PHP
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python的净值数据接口调用示例分享
2016/03/15 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
python制作小说爬虫实录
2017/08/14 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
大学军训感想
2014/02/12 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
Mysql如何查看是否使用到索引
2022/12/24 MySQL