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. GridView表头排序方法设置

    1.效果图 2.前台代码 说明:红色代码为核心代码 <asp:GridView ID="gvData" runat="server" AutoGenera ...

  2. fiddler2抓包工具使用图文教程

    fiddler2抓包工具使用图文教程 三.fiddler实用功能使用说明: 1.fiddler捕获浏览器的会话: 能支持http代理的任意程序都能被fiddler捕获到,由于fiddler的运行机制就 ...

  3. php yii框架使用MongoDb

    1.安装 运行 php composer.phar require --prefer-dist yiisoft/yii2-mongodb or add "yiisoft/yii2-mongo ...

  4. [反汇编练习] 160个CrackMe之003

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

  5. union与struct以及大小端

    两者的区别: 1. 共用体和结构体都是由多个不同的数据类型成员组成, 但在任何同一时刻, 共用体只存放了一个被选中的成员, 而结构体的所有成员都存在.   2. 对于共用体的不同成员赋值, 将会对其它 ...

  6. Java Socket(1): 入门

    前言:在最近一个即将结束的项目中使用到了Socket编程,用于调用另一系统进行处理并返回数据.故把Socket的基础知识总结梳理一遍. 一.TCP/IP协议 既然是网络编程,涉及几个系统之间的交互,那 ...

  7. 【转】iOS学习之Autolayout(代码添加约束) -- 不错不错

    原文网址:http://www.cnblogs.com/HypeCheng/articles/4192154.html DECEMBER 07, 2013 学习资料 文章 Beginning Auto ...

  8. 【转】Masonry介绍与使用实践(快速上手Autolayout)

    原文网址:http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/ 前言 1 MagicNumber -> aut ...

  9. Android-关于android:scrollbarStyle属性

    1. activity_maim.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android ...

  10. Java SE 6 新特性: 对脚本语言的支持

    2006 年底,Sun 公司发布了 Java Standard Edition 6(Java SE 6)的最终正式版,代号 Mustang(野马).跟 Tiger(Java SE 5)相比,Musta ...