1、列偏移

这个其实很简单就是通过一个样式类，通过.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。

<body class="container">
        <div class="page-header">
            <h1>案例:列偏移</h1> </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
    </body>

2、嵌套列

为了使用内置的栅格进行内容的嵌套，通过添加一个新的.row和一系列的.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套列所包含的列加起来应该等于12。

<body class="container">
        <div class="page-header">
            <h1>案例:列嵌套</h1> </div>
        <div class="row">
            <div class="col-md-9"> Level 1: .col-md-9
                <div class="row">
                    <div class="col-md-6"> Level 2: .col-md-6 </div>
                    <div class="col-md-6"> Level 2: .col-md-6 </div>
                </div>
                <div class="row">
                    <div class="col-md-3"> Level 3: .col-md-3 </div>
                    <div class="col-md-6"> Level 3: .col-md-6 </div>
                </div>
            </div>
        </div>
    </body>

首先定义了一个row,然后在此row中添加了一个.col-md-9的列，代表这个元素占有9列。

然后在这个占有9列的元素里面添加了两个不同的row。

即第一个row:将第一个row分成了两份，每份占有的6列，这12列，但是其总宽度和它外面的占有9列的元素的宽度是一样的。

第二个row:将第二个row分成了两份，第一份占有3列，第二份占有6列，然后剩余的3列没有进行填充。

3、列排序

通过使用.col-md-push-*（右移） 和 .col-md-pull-*（左移）就可以很容易的改变列的顺序。

<div class="page-header">
            <h1>案例:列排序</h1> </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-2 col-md-push-4">.col-md-2 .col-md-push-4</div>
        </div>
        <div class="row">
            <div class="col-md-7"></div>
            <div class="col-md-5 col-md-pull-4">.col-md-5 .col-md-push-4</div>
        </div>

第一行被平均分成三份，每份占有四列。这一行主要是为了与下面两行进行对照的。

第二行里只有一个元素且是占有两列，然后对此元素也添加了.col-md-push-4的样式类。（让占有两个列的元素又向右移动了4列那么现在就是占据了第五列和第六列。）

第三列被分为两份，第一份占有七列，不过是空的，然后第二份占有五列，并且对此元素也添加了一个.col-md-pull-4的样式类，当然此类和上一行附加的类应该正好有相反的效果。（让占有5列的元素又向左移动了四列，原来是从第八列开始的，那么现在是从第四列开始的。）

Bootstrap 列偏移\列嵌套\列排序的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：嵌套列

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 第四篇.Bootstrap网格系统偏移列和嵌套列

    偏移列: 在bootstrap网格系统中我们可以使用偏移列来达到让某列右移的效果,如下所示: <div class="row"> <div class=" ...

  3. tips 前端 bootstrap 嵌套行 嵌套列 溢出 宽度不正确 栅格化系统计算

    bootstrap 当嵌套列时 有时会出现很奇异的row 的width不对问题出现的情况时 <div class="row" > <!--row a--> ...

  4. bootstrap实现嵌套列

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 嵌套列</title> <li ...

  5. SQL 根据条件取不同列中的值来排序

    1  有时候排序比较复杂,比如:领导对工资在1000到2000元之间的员工更感兴趣,于是要求工资在这个范围内的员工排在前面,以便优先查看 对于这种要求我们可以在查询中新生成一列,用多列排序的方法处理代 ...

  6. bootstrap table实现iview固定列的效果

    因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果 <!DOCTYPE html> <html lang=&q ...

  7. 正确理解Mysql的列索引和多列索引

    MySQL数据库提供两种类型的索引,如果没正确设置,索引的利用效率会大打折扣却完全不知问题出在这. CREATE TABLE test ( id         INT NOT NULL, last_ ...

  8. SQL Server 动态行转列（参数化表名、分组列、行转列字段、字段值）

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 实现代码(SQL Codes) 方法一:使用拼接SQL,静态列字段: 方法二:使用拼接SQL, ...

  9. mysql复制一列到另一列

    mysql复制一列到另一列   UPDATE 表名 SET B列名=A列名 需求:把一个表某个字段内容复制到另一张表的某个字段. 实现sql语句1: 复制代码代码如下: UPDATE file_man ...

随机推荐

  1. ASP.NET MVC ActionResult的实现

    1.11种ActionResult 在System.Web.Mvc命名空间下: ActionResult是一个抽象类, 在Action中返回的都是其派生类.下面是我整理的ASP.NET MVC 1.0 ...

  2. RAID0_RAID1_RAID10_RAID5各需几块盘才可组建

    RAID 0 RAID 0即Data Stripping(数据分条技术).整个逻辑盘的数据是被分条(stripped)分布在多个物理磁盘上,可以并行读/写,提供最快的速度,但没有冗余能力.要求至少两个 ...

  3. 使用源代码安装lnmp

    一.安装nginx前,安装pcre. # tar zxvf pcre-8.12.tar.gz# ./configure# make# make install 二.安装nginx # tar zxvf ...

  4. Struts2的OGNL标签详解

    一.Struts2可以将所有标签分成3类: UI标签:主要用于生成HTML元素的标签. 非UI标签:主要用于数据库访问,逻辑控制等标签. Ajax标签:用于Ajax支持的标签. 对于UI标签,则有可以 ...

  5. [Everyday Mathematics]20150115

    试计算积分 $$\bex \int_{-\pi}^\pi \frac{\sin nx}{(1+2^x)\sin x}\rd x, \eex$$ 其中 $n$ 是自然数.

  6. java 中常见异常

    1. Java.lang.NullPointerException  这个异常大家肯定都经常遇到,异常的解释是"程序遇上了空指针",简单地说就是调用了未经初始化的对象或者是不存在的 ...

  7. HTMLayout使用心得

    1.关闭按钮 采用CSS!提供的behavior实现窗口关闭功能,不需要在C++代码中处理关闭事件 div {      behavior: sys-ctl;      -sys-ctl-pos: c ...

  8. 基于wke封装的duilib的webkit浏览器控件，可以c++与js互交，源码及demo下载地址

    转载请说明原出处,谢谢~~ 前些日子用wke内核封装了duilib的webkit浏览器控件,好多群里朋友私聊我希望可以我公布源码,今天把这个控件的源码和使用demo公布.其实这个控件封装起来没什么难度 ...

  9. Cloudera的安装

    To enable these parts of the tutorial, choose one of the following options: To use Cloudera Express ...

  10. [原创]一种Unity2D多分辨率屏幕适配方案

    此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有使用第三方2D插件,如Uni2D,2D toolkit等开发的游戏,NGUI插件不受这个 ...