3.2 栅格系统的常用方法

3.2.1 移动与调整列的位置

使用offset系列类可以将列偏移到右侧。这些类通过使用“.col-md-offset-*”选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4就是将.col-md设备下的列向右移动了4个列的宽度。

offset通过margin-left实现偏移，因此会对右侧列产生影响。以.col-md设备为例，在Bootstrap 3.3的CSS源码中（bootstrap.css）可以看到如下样式集，这些样式集定义了.col-md设备下offset的样式代码。

offset也会占据布局空间，因此设计列偏移时，必须把offset偏移宽度与col宽度进行合并计算，确保每个行中的列宽和偏移宽度之和等于或小于12格。

【实例3-5】 在两个行中配合col和offset设计列宽和列偏移效果，其中第1行设计为第1列宽度为3，第2列宽度为7，偏移为2；第2行设计为第1列和第2列宽度均为3，同时向右偏移3格。

为了能让元素呈现清晰，这里的添加样式代码如下。

HTML代码如下。

运行【实例3-5】代码，列偏移效果如图3-10所示。

【实例3-6】 在一个行中配合col和offset设计列宽和列偏移效果，其中在手机小屏与平板计算机上时设计为“列宽4，列偏移2”，在PC中屏与大屏上时设计为“列宽6，列偏移6”。

为了能让元素呈现清晰，添加如下样式代码。

HTML代码如下。

运行【实例3-6】代码，列偏移效果如图3-11所示。

3.2.2 调整列的排序

在Bootstrap中，“col-xs”“col-sm”“col-md”“col-lg”所有的列元素都使用了“position:relative;”，列排序通过相关类push和pull实现，利用这两个系列类可以调整列的显示位置，其中push向右偏移，通过left属性定义列左侧的偏移位置；pull向左偏移，通过right属性定义列右侧的偏移位置。

push和pull排序方法实现很简单，以col-md-pull-*为例，Bootstrap 3.3的CSS源码中的样式如下。

“col-md-push-*”与“col-md-pull-*”不同的是，“col-md-push-*”使用“left属性”控制右移的量。

【实例3-7】 在行中放置3个div，在PC中屏时分别置于左列（col-md-3）、中列（col-md-6）、右列（col-md-3）；当视口缩小到平板计算机大小时，调整其位置：“左列，显示在右侧”“中列，显示在左侧”“右列，显示在中间”。

添加如下样式代码。

HTML代码如下。

运行【实例3-7】代码，列顺序调整效果如图3-12所示。

3.2.3 列嵌套排版

在网页设计中，因为排版的需要，有时要在一个div中再加入数个div。这样将一组新的网格内容加入原来已有的网格系统中就称为嵌套。Bootstrap支持列嵌套，栅格系统中的多层布局提供了简单的实现方式。用户只需在嵌套的列内部新添加一行，在添加的行内继续使用栅格系统即可。

注意，内部所嵌套的行的宽度为100%，就是当前外部列的宽度。

【实例3-8】 实现列的嵌套排版。

添加如下样式代码。

HTML代码如下。

运行【实例3-8】代码，列的嵌套排版效果如图3-13所示。

【实例3-8】第2列“<div class="col-md-9">”中嵌套了一个“<div class="row">”元素，并在行内部嵌套了两个“<div class="col-xs-6">”。