为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .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. https://segmentfault.com/a/1190000004518374#articleHeader3

    https://segmentfault.com/a/1190000004518374#articleHeader3 https://segmentfault.com/q/10100000049065 ...

  2. Spring Cloud学习笔记-009

    API网关服务:Spring Cloud Zuul API网关是一个更为智能的应用服务器,它的定义类似于面向对象设计模式中的Façade模式,它的存在就像是整个微服务架构系统的门面一样,所有的外部客户 ...

  3. 【转载】C++基本功和 Design Pattern系列 ctor & dtor

    最近实在是太忙了,无工夫写呀.只能慢慢来了.呵呵,今天Aear讲的是class.ctor 也就是constructor, 和  class.dtor, destructor. 相信大家都知道const ...

  4. php Redis函数使用总结(string,hash,list, set , sort set )

    对于:string, set , sort set , hash 的增,改操作,是同一个命令,但是把它当改操作时,及时成功返回值依旧为0 对于:list结构来说,增删改查自有一套方法.   <? ...

  5. 使用控制台调试WinForm窗体程序

    .程序代码结构 .Win32DebuggerHelper.cs using System.Runtime.InteropServices; /* TODO:使用方法 Win32.AllocConsol ...

  6. java中的数组概念

    数组的定义形式: 动态初始化方式: 1.声明并开辟数组 String str[]=new String[3];//3表示数组的长度 2.分布完成 String str[]=null; str=new ...

  7. poj 1046 ——Color Me Less

    提交地址:http://poj.org/problem?id=1046 Color Me Less Time Limit: 1000MS   Memory Limit: 10000K Total Su ...

  8. [NOI 2014]动物园

    Description 题库链接 \(t\) 组询问.每组询问给出一个字符串 \(S\) .要求求出一个 \(num\) 数组一一对于字符串 \(S\) 的前 \(i\) 个字符构成的子串,既是它的后 ...

  9. 【USACO】股票市场

    题目描述 尽管奶牛天生谨慎,它们仍然在住房抵押信贷市场中大受打击,现在它们准备在股市上碰碰运 气.贝西有内部消息,她知道 S 只股票在今后 D 天内的价格. 假设在一开始,她筹集了 M 元钱,那么她该 ...

  10. 关于Miller-Rabbin的一点想法

    在好久之后终于搞完了miller-rabbin素性测试,谈谈自己的理解 要判断的数设为 a, 主要思想就是运用费马小定理来搞,随机几个数x(x<=a-1),判断x^(a-1)=1(mod a)是 ...