为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .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. hue集成hbase出现TSocket read 0 bytes

    解决办法:修改hbase的配置文件 添加以下配置 https://stackoverflow.com/questions/20415493/api-error-tsocket-read-0-bytes ...

  2. 创建第一个Django项目

    第一个Django项目 命令行下使用如下命令创建一个名为"mysite"的Django项目: django-admin startproject mysite 这将会在当前位置创建 ...

  3. 新购阿里云服务器ECS创建之后无法ssh连接的问题处理

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 问题描述 由于原服务器将要到期,因此趁着阿里云搞促销活动重新购买了一 ...

  4. 通过TCP实现显示屏截图请求及回传

    在很多业务场景下,需要监视显示屏画面.在实时性要求不高的情况下,可以通过定时对显示屏进行截图及回传实现. 本文通过C#中提供的TCP通信功能,对该功能的实现进行简单描述. 首先,该功能的实现分为客户端 ...

  5. C#之IComparable用法,实现List<T>.sort()排序

    这篇文章主要介绍了C#的一些基础知识,主要是IComparable用法,实现List<T>.sort()排序,非常的实用,这里推荐给大家.   List<T>.sort()可以 ...

  6. [LeetCode] Find the Derangement of An Array 找数组的错排

    In combinatorial mathematics, a derangement is a permutation of the elements of a set, such that no ...

  7. 虚拟机工作站创建虚拟机并安装Linux教程

    前言: 今天开始学习一下Linux,之前早就想看,但是一直没时间,最近把其他知识整理完了,终于有时间来看一下Linux了. 本节只是安装虚拟机工作站,虚拟机,和Linux操作系统的过程,详细的记录了我 ...

  8. Idea导入多个maven项目到同一目录下

    目标 简单导入多个maven项目进入同一个project(相当于eclipse的workspace) 过程 1.新建一个目录作为仿eclipse的workspace,这里起名为idea-workspa ...

  9. Java必须了解的“递归”与“IO流”!!!

    >>>First: 递归! 1. 定义: 在函数自身内部,调用函数本身的方式,称为递归. 2. 注意: 递归包括递进去.归出来两步. 首先,依次执行[函数调自身语句]上半部分的代码, ...

  10. TopCoder SRM 560 Div 1 - Problem 1000 BoundedOptimization & Codeforces 839 E

    传送门:https://284914869.github.io/AEoj/560.html 题目简述: 定义"项"为两个不同变量相乘. 求一个由多个不同"项"相 ...