栅格系统

Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)，支持Sass mixins自由调用，并结合自己预定义的CSS、Js类，用来创建各种形状和尺寸的布局。

机制原理

Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容，不同于旧版3.0，新版是完全基于flexbox流式布局构建的，完全支持响应式标准。下面的示例，可以让我们深入了解网格如何组合在一起。

新手不熟悉flexbox？ 阅读这篇关于flexbox布局文章，可以了解其背景、术语、规则和示例代码。

中文版的FlexBox布局教程可见：https://www.z01.com/help/web/3234.shtml （译者注）

三分之一空间占位

<div class="container">
  <div class="row">
    <div class="col-sm">
      三分之一空间占位
    </div>
    <div class="col-sm">
      三分之一空间占位
    </div>
    <div class="col-sm">
      三分之一空间占位
    </div>
  </div>
</div>

上面的例子使用BootStrap预定义的栅格系统，演示了在.container容器内建立了三个等宽的列，并且分别兼容在small(极窄宽度网页)、medium(中等宽度网页)、large(宽网页)、extra large(超宽网页)四种设备类型-即无论网页宽度如何，这三个列都是恒在呈现的。

让我们来慢慢揭开它的工作原理：

栅格系统提供了集中内容居中、水平填充网页内容的方法，使用.container(严格意义上也包括.container-fluid，后文相同不再备注-译者)应答网页宽度，或使用.container-fluid使网页能够以100%宽度呈现在所有的浏览器窗口或设备尺寸上。
换一个说法就是：.container实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其它网格实现对齐(译者注)。
行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下)，每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。
网页开发者的呈现内容必须放置在列(.col-*中，而且只有列可以是行的直接子元素，否则都是违法的(不可以在.col-*以上添加呈现内容。
这一切都要感谢flexbox流式布局，从而使我们不需要指定列的宽度(旧版Bootsrap3是采用严格宽度定义来实现的)就能实现网页自动等宽排列，比如我们在.container中置入初始化的四个.col-sm就能实现各自25%宽度并左对齐形成一行的排列。更多示例，请参阅本文档自动布局列部分。
你可能注意到.col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4就是正确的(后文会有详细的介绍)。
.col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响(这正是flexbox布局的特征，子元素的宽比和排列受父元素定义)。
列具有水平padding定义，用于创建列与列之的间隙。
.row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即<div class="row no-gutters"...。(译者原意拆成两行表述)。
总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大（大、特大也可以称为宽、超宽）.col-xl-*。
栅格断点的媒体查询基于宽度的最小值，意味着它们应用到某一等级以及这一等级之上的所有（如.col-sm-4的的定义可以在小型、中型、宽、超宽设备上呈现，但不适用于能在超小型.col-sx上呈现）。
用户不需要自行定义网格，可以直接使用系统预定义的栅格类（如.col-4）或采用Sass mixins来进行更多的语义标记满足开发需要。

请注意：Flexbox布局虽然很先进，但也有一定的限制和错误，如无法使用某些HTML元素作为弹性容器，点此可扩展相关知识。

栅格选项

Bootstrap使用ems或rems来定义大多数属性的规格大小、px用于全局层面网格断点和容器宽度（因为浏览器和设备的宽度是以像素px为单位，且不会随字体大小而变化）。

通过一个简单的表格查看Bootstrap的网格系统在各种屏幕和设备上的细节约定：

	超小屏幕 (新增规格)<576px	小屏幕次小屏≥576px	中等屏幕窄屏≥768px	大屏幕桌面显示器≥992px	超大屏幕大桌面显示器≥1200px
`.container` 最大宽度	None (auto)	540px	720px	960px	1140px
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
列（column）数	12
列间隙	30px (每列两侧各15px)
可嵌套性	Yes
可排序性	Yes

译者注：

1、在Bootstrap 4中，屏幕的大小是真正的“断点”，即如果只定义一个屏幕规格即可向上覆盖所有设备，向下如果没有定义则默认为12栅格占位-译者注。

2、有版本将540px断点翻译为平板，目前业界平板(如ipad)进入高清屏幕时代，故本翻译不作此处理以符发展需求。

3、实践中，一个<div class="col"></div>或<div class="col-N"></div>代表手机断点

自动布局列

利用栅格断点特性进行排版，可以简化列的大小，而不需要批定显式的列宽，如强制写为：.col-sm-6。

等宽布局

下面的列子，展示了一行两列与一行三列的布局，从xs（如上表如见，实际上并不存在xs这个空间命名，是以.col表示，下同不再注）到xl（即.col-xl-*）所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成。

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

等宽列可以分成多行，但是有一个Safari旧版浏览器的flexbox错误，阻止它在没有显示flex-basis或border（影响到边框效果）。
Bootstrap非官方的一个实例，已经介绍了两种解决方法，但如果是最新safri浏览器下，则不需要这样做。

下面是等宽列两行的处理方法，引用w-100进行切割分行：

Column

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

设置一列宽度

在Flexbox的布局上，拥有很多现代特征，比如自动布局和列宽处理。你可以在一行多列的情况下，特别指定一列并进行宽度定义，同时其它列自动调整大小，可以使用预定义的栅格类（如下所示），从而实行栅格宽或行宽的优化处理。注意在这种民琣上，无论中心定义列的宽度如何，其他列都将调整大小。

1 of 3

2 of 3 (更宽-12格中占6格，其它6格另外两列平分)

3 of 3

1 of 3

2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)

3 of 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (更宽-12格中占6格，其它6格另外两列平分)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可变宽度的弹性空间

使用 col-{breakpoint}-auto 断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。.

1 of 3

可变宽度内容自由伸张，左右宽度不变。

3 of 3

1 of 3

可变宽度内容自由伸张,左列宽度变化(右列绑定co-lg-2栅格数)

3 of 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

等宽多行

创建跨多个行的等宽列，方法是插入.w-100要将列拆分为新行。通过混合.w-100一些还可以影响一些显示状态效果,如按钮排序等。

译者注：这部份其实和上面safri浏览器bug讲解重复了，但官网如此保持尊重。

又注：.w100似乎与.clearfix有时可以达到同样的网页效果。

col

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

响应式的class选择器

Bootstrap的栅格系统包括五种宽带预定义，用于构建复杂的响应布局，你可以根据需要定义在特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*五种屏幕(设备)下的样式。

覆盖所有设备

如果要一次性定义从最小设备到最大设备相同的网格系统布局表现，请使用.col和.col-*类。后者是用于指定特定大小的(如.co-6)，否则使用.col就可以了。

col

col-8

col-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

水平堆砌

使用单一的.col-sm-*类方法，可以创建一个基本的网格系统，此时如果没有指定其它媒体查询断点宽度，这个栅格系统是成立的，而且会随着屏幕变窄成为超小屏幕.col-后，自动成为每列一行、水平堆砌。改变网页屏幕宽度你可以在下面列子看到效果：

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

混合布局

设计师们当然不会简单的把各个屏幕下的栅格都做成一样，那将是单调乏味的，所以你可以根据需要对每一个列进行不同的设备定义。下方示例展示了原理：

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- 定义在超小屏幕下1列全宽、1列半宽，而其它场景以8:4比例并行排列 -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-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-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

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

对齐

flexbox布局可以轻松的实现DIV空间布局的垂直、水平对齐。

垂直对齐示例

上边贴齐

上边贴齐s

上下居中对齐

下边对齐

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

上边对齐

上下居中对齐

下边对齐

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

水平对齐示例

左贴齐对齐

居中贴齐

右贴齐对齐

间隔相等对齐帖齐

两端对齐帖齐

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

间隙沟槽(gutters)清除

BootStrap默认的栅格和列间有间隙沟槽，一般是左右-15px的margin或padding处理，您可以使用.no-gutters类来消除它，这将影响到.row行、列平行间隙及所有子列。

以下是创建这些样式的源代码。注意，列替换仅限于第一个子列，并通过属性选择器进行定位。当这产生一个更具体的选择器时，列填充仍然可以使用间隔实用程序进一步定制。

如果你需要无边缝设计(edge-to-edge design)，则请在父DIV中放弃.container与.container-fluid容器。

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

下方为实际效果展示，您可以继续使用所有BootStrap预定义的栅格系统（包括列宽、响应层、属性、排序等）：

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

列换行

如果在一行内子DIV定义的栅格总数超过12列，BootStrap会在保留列完整的前提下，将无法平行布局的多余列，重置到下一行，并占用一个完整的新行。

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

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

换行

一般换行推荐使用添加多个.row来达成，否则你可以使用系统提供的.w-100方法处理，其思路是强行插入一个width:100%的DIV进行隔离切断（前文有两处提到,这是Flexbox流式布局的一个Hack，目前没有更好的方案）。

.col-6 .col-sm-3

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

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

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

也可以结合响应式实用程序来换行(切割)。

.col-6 .col-sm-4

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

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

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

重排序

Class顺序重定义

使用 .order-* class选择符，可以对DIV空间进行 可视化排序,系统提供了.order-1到.order-1212个级别的顺序，在五种浏览器和设备宽度上都能生效。

1号空间-未定义序号，位置不变。

2号空间-排最后。

3号空间-放第1但受1号空间不变影响居第2位。

<div class="container">
  <div class="row">
    <div class="col">
      1号空间-未定义序号，位置不变。
    </div>
    <div class="col order-12">
      2号空间-排最后。
    </div>
    <div class="col order-1">
      3号空间-放第1但受1号空间不变影响居第2位。 
    </div>
  </div>
</div>

还可以使用.order-first，快速更改一个顺序到最前面，同时其它元素也相应的获得了order:-1的属性，这个属性也可以与。.order-*混合使用。

1号空间-未定义顺序。

2号空间-未定义顺序。

3号空间-优先排序，占第1位。

<div class="container">
  <div class="row">
    <div class="col">
       1号空间-未定义顺序。
    </div>
    <div class="col">
       2号空间-未定义顺序。
    </div>
    <div class="col order-first">
      3号空间-优先排序，占第1位。
    </div>
  </div>
</div>

列偏移

可以使用两种方式进行列偏应：
1、使用响应式的.offset-*栅格偏移方法。
2、使用边界处理实用程序，它内置了诸如.ml-*、.p-*、.pt-*等实用排工具。

class偏移选择器

使用.offset-md-*类可以使列向右偏移，通过定义*的数字，则可以实现列偏移，如.offset-md-4则是向右偏移四列。

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

除了在响应断点处清除列，您可能需要重置偏移量，下面的栅格示例展示了这一点：

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col.col-sm-6.col-md-5.col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

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

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

Margin移动布局

在BootStrap V4中，你可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现类水平隔离的效果。

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）数量推荐不要超过12个（其实，没有要求你必须占满12列-否则应对页面进行重新规划布局）。

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

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

Sass mixins

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

变量

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

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

// Creates a wrapper for a series of columns 
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

应用案例

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

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Main content

Secondary content

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

自定义栅格系统

使用BootStrap v4内置的栅格系统之Sass变量和 maps文件，可以完全自定义自己的栅格格环境、并可以更改DIV层次、媒体查询维度和container容器宽度，然后重新编译。

自定义列和间隙

以通过修改Sass变量、重定义栅格系统列的数量，使用$grid-columns命令可生成每个单独列的宽度（以百分比表示），同时$$grid-gutter-width允许在平行排列$padding-left和$padding-right对于平台间隔均匀分割的断点特定宽度。

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

自定义栅格

超越自我，您还可以自定义网格层数。如果你只想要四个格子层，只要更新$$grid-breakpoints和$$container-max-widths等类参数。

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

对Sass变量或map文件进行任何更改，都需要保存更改并重新编译。这样做将为列宽度，偏移量和排序输出一组全新的预定义栅格类。响应可见性实用程序也将更新为使用自定义断点，同时濂晨设置网格值时是采用px单位（而不是rem、em或%）。