Bootstrap3 栅格系统之列嵌套
列嵌套
Bootstrap栅格系统也支持列嵌套,即在一个列中嵌套一个或多个行。被嵌套的行依然遵守最大 12 列的规则,即一行中所包含的总列数不能大于12(当然,也没有要求你必须占满12列),如果大于 12,多余的列所在的元素将被作为一个整体另起一行排列。
以下实例在一个已经存在的 .col-sm-9 元素中,添加一个新的 .row 元素和一系列 .col- * 元素来实现列嵌套:
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
<div class="col-xs-4 col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
</div>
</div>
</div>
上述代码的运行结果如图 2‑7所示:
图2-7 Bootstrap列嵌套
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap3 栅格系统之列嵌套相关推荐
- Bootstrap3 栅格系统之列排序
列排序 Bootstrap 栅格系统中一个非常人性化的特性,就是使用 .col-md-push-* 和 .col-md-pull-* 类来改变列的顺序.push 将元素向右推动 * 指定的列数,pul ...
- Bootstrap3 栅格系统之列平移
列平移 使用 .col-md-offset-* 类,可以将列向右侧平移,* 指定要平移的列数.平移的本质,是为元素增加 * 列的左外边距(margin-left).如,.col-md-offset-4 ...
- Bootstrap3栅格系统布局实例
布局实例 Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先.使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局. 先看一个简单实例,来加深对移动设备优先的理 ...
- Bootstrap3 栅格系统
栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 工作原理 Bootstrap栅格系统通过一系列的行 ...
- bootstrap栅格系统自定义列
bootstrap栅格系统默认是12列,有时候需自定义列数,比如显示5列 简单做法:原理就是找到控制列的样式覆盖它,这里以中等屏幕示例: <span style="font-size: ...
- Bootstrap3 栅格系统-简介
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...
- Bootstrap3 栅格系统-媒体查询
在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值. /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 B ...
- Bootstrap3 栅格系统-栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的. -–下面有个"顶"字,你懂得O(∩_∩)O哈哈~ -–乐于分享,共同进步! -–更多文章请看:h ...
- Bootstrap3 栅格系统之自定义mixin和变量
mixin和变量 除了用于快速布局的预定义栅格类,Bootstrap 还包含了一组 Less 变量和 mixin,通过自定义这些变量和 mixin,可以生成简单.语义化的布局. 1.变量 通过变量来定 ...
最新文章
- Windows 10 Anaconda Python 3.7 安装 MXNet GPU版
- Linux系统新手学习的11点建议
- Cocos2d-x 3.0 rc0中加入附加项目,解决无法打开包括文件:“extensions/ExtensionMacros.h”...
- BoneCP学习笔记——配置参数
- python快速入门答案-Python 快速入门笔记(1):简介
- 2011年给力新作——《数据库系统工程师考试案例梳理、真题透解与强化训练》...
- 课程设计---停车场管理系统
- 使用C++访问OPC Server的简单方法
- devops定义_在层中定义DevOps
- python的编译过程_Python docutils文档编译过程方法解析
- linux so 库的生成与调用
- Solr 新增、更新、删除索引
- 如何彻底解决烦人的 MySQL 分库分表问题?写一个更好的数据库!
- C++文件操作的HelloWorld
- uniapp解决h5打包空白的问题
- 巴塞尔iii_巴塞尔协议——银行风控实施的超级系统工程 之二
- 逻辑回归原理与sklearn实现
- casio计算机按键,有木有卡西欧991plus上面每个按键的功能
- Initramfs文件系统的制作
- 美国大学生足球联赛数据集football——DeepWalk算法