1、列偏移

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

  1. <body class="container">
  2.         <div class="page-header">
  3.             <h1>案例:列偏移</h1> </div>
  4.         <div class="row">
  5.             <div class="col-md-4">.col-md-4</div>
  6.             <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  7.         </div>
  8.         <div class="row">
  9.             <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  10.             <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  11.         </div>
  12.         <div class="row">
  13.             <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  14.         </div>
  15.     </body>

2、嵌套列

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

  1. <body class="container">
  2.         <div class="page-header">
  3.             <h1>案例:列嵌套</h1> </div>
  4.         <div class="row">
  5.             <div class="col-md-9"> Level 1: .col-md-9
  6.                 <div class="row">
  7.                     <div class="col-md-6"> Level 2: .col-md-6 </div>
  8.                     <div class="col-md-6"> Level 2: .col-md-6 </div>
  9.                 </div>
  10.                 <div class="row">
  11.                     <div class="col-md-3"> Level 3: .col-md-3 </div>
  12.                     <div class="col-md-6"> Level 3: .col-md-6 </div>
  13.                 </div>
  14.             </div>
  15.         </div>
  16.     </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-*（左移）就可以很容易的改变列的顺序。

  1. <div class="page-header">
  2.             <h1>案例:列排序</h1> </div>
  3.         <div class="row">
  4.             <div class="col-md-4">.col-md-4</div>
  5.             <div class="col-md-4">.col-md-4</div>
  6.             <div class="col-md-4">.col-md-4</div>
  7.         </div>
  8.         <div class="row">
  9.             <div class="col-md-2 col-md-push-4">.col-md-2 .col-md-push-4</div>
  10.         </div>
  11.         <div class="row">
  12.             <div class="col-md-7"></div>
  13.             <div class="col-md-5 col-md-pull-4">.col-md-5 .col-md-push-4</div>
  14.         </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. .Net中的各种序列化

    我们知道将对象的状态保持在存储媒体中,以便可以在以后重新创建精确的副本这正是数据持久化所要做的.而且,不同应用程序之间的通讯需要相互传输数据.那么序列化和反序列化正是为此而生. 序列化和反序列化 所谓 ...

  2. 【转】出現 "PowerCam player support IE browser only!" 的錯誤訊息

    原文网址:http://www.camdemy.com/faq/1138 A.  這是由於新版 IE11 針對文件模式設定的改變,衍生 PowerCam5 及6 的教材閱讀問題 ( EverCam 已 ...

  3. MySQL基础之第9章 触发器

    触发器(TRIGGER)是由事件来触发某个操作.这些事件包括INSERT语句.UPDATE语句和DELETE语句.当数据库系统执行这些事件时,就会激活触发器执行相应的操作.MySQL从5.0.2版本开 ...

  4. winform实现自动更新并动态调用form实现

    winform实现自动更新并动态调用form实现 标签: winform作业dllbytenull服务器 2008-08-04 17:36 1102人阅读 评论(0) 收藏 举报  分类: c#200 ...

  5. C#中的lock关键字

    前几天与同事激烈讨论了一下,有一点收获,记录起来. 首先给出MSDN的定义: lock 关键字可以用来确保代码块完成运行,而不会被其他线程中断.这是通过在代码块运行期间为给定对象获取互斥锁来实现的. ...

  6. 滑屏 H5 开发实践九问

    滑屏的交互形式自从在 H5 中流行起来,便广泛应用在产品宣传.广告.招聘和活动运营等场景中,作为微信朋友圈广告惯用的形式,其影响力更是得到了强化与放大.如今滑屏H5可谓玲琅满目,数不尽数. 作为一个 ...

  7. mybatis实战教程(mybatis in action)之九:mybatis 代码生成工具的使用

    mybatis 应用程序,需要大量的配置文件,对于一个成百上千的数据库表来说,完全手工配置,这是一个很恐怖的工作量. 所以mybatis 官方也推出了一个mybatis代码生成工具的jar包. 今天花 ...

  8. Java异常的分类

    1. 异常机制       异常机制是指当程序出现错误后,程序如何处理.具体来说,异常机制提供了程序退出的安全通道.当出现错误后,程序执行的流程发生改变,程序的控制权转移到异常处理器.       传 ...

  9. HDU5779 Tower Defence (BestCoder Round #85 D) 计数dp

    分析(官方题解): 一点感想:(这个题是看题解并不是特别会转移,当然写完之后看起来题解说得很清晰,主要是人太弱 这个题是参考faebdc神的代码写的,说句题外话,很荣幸高中和faebdc巨一个省,虽然 ...

  10. 《Python CookBook2》 第一章 文本 - 控制大小写 && 访问子字符串

    控制大小写 任务: 将一个字符串由大写转成小写,或者泛起到而行之. 解决方案: >>> a = 'a'.upper() >>> a 'A' >>> ...