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读写XML简单方法

    xml文件 <?xml version="1.0" encoding="utf-8"?> <book> <title>web ...

  2. [反汇编练习] 160个CrackMe之014

    [反汇编练习] 160个CrackMe之014. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  3. Azure SQL 数据库与新的数据库吞吐量单位

    在这一期中,Scott 与 Azure SQL 数据库性能首席项目经理主管 Tobias Ternstrom 一起详细阐释了新的数据库吞吐量单位 (Database Throughput Unit, ...

  4. 在Android应用中使用Clean架构

    自从开始开发安卓应用,我一直感觉我可以做得更好.我看过不少烂代码,其中当然有我写的.安卓系统的复杂性加上烂代码势必酿成灾祸,所以从错误中成长就很重要.我Google了如何更好地开发应用,发现了这个叫做 ...

  5. js一些平时会用到的

    如何屏蔽页面js错误    <script language="javascript">    function killErrors()    {        re ...

  6. 在英文 sql2005中 比较nvarchar 与 varchar的速度

    declare @str1 varchar(max); declare @count int; ; print 'begin' begin set @str1 = @str1 + '*'; ; end ...

  7. MySQL备份与复制

    1.二进制日志 二进制日志记录了数据库的所有改变,使得任何slave都可以执行相同的更新.一般来说,开启二进制日志大概会有1%的性能损耗,它有两个重要的使用场景: (1)备份:在某个时间点t作了一次备 ...

  8. C#发送Email邮件（实例：QQ邮箱和Gmail邮箱）

    下面用到的邮件账号和密码都不是真实的,需要测试就换成自己的邮件账号. 需要引用: using System.Net.Mail; using System.Text; using System.Net; ...

  9. bjfu1100 圆环

    这题也是2011百度之星的一道题.知道做法后代码极简单. 不过我做完后随便上网搜了一下,发现竟然还有很多不同的做法.别的做法我就不管了,我只把我的做法的原理说清楚.我做题时是按如下顺序逐步找到规律的: ...

  10. 浅谈javascript的变量作用域

    1.变量遵循先声明再使用. console.log(b); b=123; 代码运行结果: Uncaught ReferenceError: b is not defined 2.方法内定义的局部变量外 ...