为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。

<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>

—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~

—–乐于分享,共同进步!

—–更多文章请看:http://blog.csdn.net/duruiqi_fx


Bootstrap3 栅格系统-嵌套列的更多相关文章

  1. BootStrap3栅格系统与布局

    栅格系统与布局 Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks t ...

  2. Bootstrap3 栅格系统-实例:从堆叠到水平排列

    使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列.所有"列( ...

  3. Bootstrap3 栅格系统-简介

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...

  4. Bootstrap3 栅格系统-栅格参数

    通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的. -–下面有个"顶"字,你懂得O(∩_∩)O哈哈~ -–乐于分享,共同进步! -–更多文章请看:h ...

  5. Bootstrap3 栅格系统-媒体查询

    在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值. /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 B ...

  6. Bootstrap3 栅格系统-列排序

    通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <div class="row"> <d ...

  7. Bootstrap3 栅格系统-列偏移

    使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-offset-4 类将 .col-md- ...

  8. Bootstrap3 栅格系统-实例:响应列重置(Responsive column resets)

    四层的网格你肯定会遇到问题,可用在特定的断点,你的列不清楚作为一个比另一个高完全正确.为了解决这个问题,结合使用.clearfix和响应的实用工具类. <div class="row& ...

  9. Bootstrap3 栅格系统-实例:多余的列(column)将另起一行排列

    如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列. <div class="row"> &l ...

随机推荐

  1. 分析ajax请求抓取今日头条关键字美图

    # 目标:抓取今日头条关键字美图 # 思路: # 一.分析目标站点 # 二.构造ajax请求,用requests请求到索引页的内容,正则+BeautifulSoup得到索引url # 三.对索引url ...

  2. Linux下的MySQL5.7.14启动方法

    启动MySQL服务: systemctl start mysql 启动MySQL服务(安全方式): mysqld_safe --user=mysql & 登录MySQL(有密码): mysql ...

  3. 深入解析浏览器的幕后工作原理(三) 呈现树和 DOM 树的关系

    呈现树和 DOM 树的关系 呈现器是和 DOM 元素相对应的,但并非一一对应.非可视化的 DOM 元素不会插入呈现树中,例如"head"元素.如果元素的 display 属性值为& ...

  4. nginx 安装及简单配置(适用 小白)

    一.nginxNginx是一个异步框架的 Web服务器,也可以用作反向代理,负载平衡器 和 HTTP缓存,Nginx可以部署在网络上使用FastCGI脚本.SCGI处理程序.WSGI应用服务器或Phu ...

  5. [SDOI 2011]黑白棋

    Description 题库链接 给出一个 \(1\times n\) 的棋盘,棋盘上有 \(k\) 个棋子,一半是黑色,一半是白色.最左边是白色棋子,最右边是黑色棋子,相邻的棋子颜色不同. 小 \( ...

  6. codeforces 842C Ilya And The Tree

    Ilya is very fond of graphs, especially trees. During his last trip to the forest Ilya found a very ...

  7. Codeforces 812E Sagheer and Apple Tree

    大致题意: 给你一颗树,这个树有下列特征:每个节点上有若干个苹果,且从根节点到任意叶子节点的路径长度奇偶性相同. 甲和乙玩(闲)游(得)戏(慌). 游戏过程中,甲乙轮流将任意一个节点的若干个苹果移向它 ...

  8. weak_ptr解决shared_ptr环状引用所引起的内存泄漏[转]

    转载:http://blog.csdn.net/liuzhi1218/article/details/6993135 循环引用: 引用计数是一种便利的内存管理机制,但它有一个很大的缺点,那就是不能管理 ...

  9. ●2301 [HAOI2011] Problem b

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=2301 题解: 莫比乌斯反演,入门题. 类似●HDU 1695 GCD 只是多了一个下界,(另 ...

  10. ●BZOJ 3879 SvT

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=3879 题解: 后缀数组,单调栈,RMQ 其实类似 BZOJ 3238 [Ahoi2013]差 ...