网格系统

Bootstrap包含了一个强大的移动优先的网格系统，用来创建各种形状和尺寸的布局。它基于一个12列的布局，有很多的等级，为每个媒体查询范围创建了一个等级。你可以与Sass mixins配合使用它，或者与我们预定义的类配合使用它。

工作机制

在一个高层次，以下是网格系统的工作原理：

• 总共有三个主要的组件：容器、行和列。
• 容器——.container实现固定的宽度，.container-fluid实现全宽度，会将你的页面的内容居中，帮助你对齐网格系统。
• 行是列的横向组合，确保适当地排列你的列。
• 内容必须放置在列中，而且只有列可以是行的直接子元素。
• 列类表明你想要占用的列的数量，每行最多可用12列。所以如果你想用三个等宽列，你可以使用.col-sm-4。
• 列的width是用百分比设置的。所以它们总是是流式的，而且尺寸与父元素相关。
• 列拥有水平的padding，以创建列与列之间的间隙。
• 总共有五个网格等级，每个响应式分界点隔出一个等级：特小，小，中，大，特大。
• 网格等级基于宽度的最小值，意味着它们应用到某一等级以及这一等级之上的所有（比如，.col-sm-4应用到小、中、大、特大设备）
• 对于更多的主意上的标记，你可以使用预定义的网格类或者Sass mixins。

听起来不错？很好，那么让我们在一个实例中进一步学习吧。

快速开始示例

如果你正在使用 Bootstrap编译好的CSS, 就从下面的例子开始吧！

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
  </div>
</div>

上面的例子在小屏、中等屏、大屏、特大屏的设备创建了三个等宽的列，使用我们事先定义好的网格类。这些列和父.container 位于页面的中央。

网格选项

通过一个简单的表格查看Bootstrap的网格系统在多种设备上的工作的方方面面：

Sass mixins

使用Bootstrap的源Sass文件时，你可以选择使用Sass变量，或者mixins，以创建自定义的、语义化的、响应式的网页布局。我们的预建类使用相同的变量以及mixins，为快速响应布局提供整个现成的套件。

变量

变量决定列的数量、缝隙宽度以及切换到浮动列的媒体查询点。我们用这些来生成上文提及的预定义网格列，定制出如下所示的自定义mixins：

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 34em,    // 480px
  // Medium screen / tablet
  md: 48em,    // 768px
  // Large screen / desktop
  lg: 62em,    // 992px
  // Extra large screen / wide desktop
  xl: 75em     // 1200px
) !default;

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

Mixins

Mixins用来联合网格变量，为每个网格列生成语义化的CSS。

// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
  margin-left:  ($gutter / -2);
  margin-right: ($gutter / -2);
  @include clearfix();
}

// Make the element grid-ready (applying everything but the width)
@mixin make-col($gutter: $grid-gutter-width) {
  position: relative;
  float: left;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
}

// Set a width (to be used in or out of media queries)
@mixin make-col-span($columns) {
  width: percentage(($columns / $grid-columns));
}

// Get fancy by offsetting, or changing the sort order
@mixin make-col-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}
@mixin make-col-push($columns) {
  left: percentage(($columns / $grid-columns));
}
@mixin make-col-pull($columns) {
  right: percentage(($columns / $grid-columns));
}

应用案例

你可以将变量修改为你自己定义的值，或者直接使用mixins的默认值。这里有一个案例，使用默认设置创建两列布局以及一个列与列之间的缝隙。

在渲染示例中查看实际效果：

.container {
  max-width: 60em;
  @include make-container();
}
.row {
  @include make-row();
}
.content-main {
  @include make-col();

  @media (max-width: 32em) {
    @include make-col-span(6);
  }
  @media (min-width: 32.1em) {
    @include make-col-span(8);
  }
}
.content-secondary {
  @include make-col();

  @media (max-width: 32em) {
    @include make-col-span(6);
  }
  @media (min-width: 32.1em) {
    @include make-col-span(4);
  }
}

<div class="container">
  <div class="row">
    <div class="content-main">...</div>
    <div class="content-secondary">...</div>
  </div>
</div>

预定义类

除了我们的语义化的mixins之外，Bootstrap还包含了很多预建立的类，用于快速创建网格列。它包含了基于设备的列调整、重新排序列，以及其它选项。

示例：横向排布

只要使用一个.col-md-*网格类集合，你就可以创建一个基本的网格系统，在移动设备以及特小屏或者小屏的平板设备上纵向排布，而在桌面（中屏）设备上横向排布。请把网格列放在任何.row中。

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</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-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

移动端和桌面端

不期望你的列在小屏设备上简单纵向排布？可以使用特小屏和中屏网格类，只要在列上添加.col-xs-*和.col-md-*类即可。请看下面的例子，看看它是怎么工作的。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

示例：移动端，平板电脑端，桌面端

在前面的例子的基础上，通过添加平板端样式类.col-sm-*，可以创建更有动态性、更强大的布局。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix hidden-sm-up"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

示例：列包裹

如果一个列中放置了超过12列格，每一组超出的列，将成为一个单元，包裹入一个新行。

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

示例：响应式列重置

有了那四个可用的网格层级，你可能会遇到那种问题，就是在一个特定的分界点上，多列会显示得不太正确，因为列与列不等高。为了解决这个问题，可以组合使用一个.clearfix以及响应式工具类。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix hidden-sm-up"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

为了能让列在响应式分界点上显示正确，你可能还必须添加重置位移、推、拉等。在网格示例中可以看到实例。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

示例：位移列。

使用.col-md-offset-*类可以把列往右移。这个类根据*数增加了一个列的左边距。比如说，.col-md-offset-4把.col-md-4往右移了四列格。

<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>

嵌套列

只要在一个已经存在的.col-sm-*列中添加一个新的.row以及一系列.col-sm-*，就可以使用默认的网格嵌套你的内容。嵌套的列可以包含若干个列，最多不超过12个列格（不需要把12个列格全占用完）

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

示例：列排序

使用.col-md-push-*以及.col-md-pull-*修正类，可以轻松改变内建网格列的顺序。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>