【译】Bootstrap的网格体系

• 原文链接：getbootstrap.com/docs/4.1/la…

---

原理

Bootstrap的网格系统使用了一系列容器、行和列，以及对齐内容。它用flexbox实现，是完全响应式的。下面是一个例子，帮你深入了解网格的构成。

对flexbox不熟? 读读CSS技巧：Flexbox指导。

<div class="container">
  <div class="row">
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
  </div>
</div>

复制代码

上面的例子，用Bootstrap预定义的网格类创建了三个列(column)，在小型、中型、大型和超大型设备上都是等宽的。这些列用父容器.container组织在页面的居中位置。

让我们拆开来看看它的原理：

• 容器.container使你能够居中摆放页面内容。使用.container，容器宽度是响应式的、以像素为单位的；使用.container-fluid，容器宽度就是width:100%，横跨整个视口/设备。
• 行是列的包裹层。每个列都用水平的padding（叫做gutter）来控制它们之间的空间。这个padding之后会用行的负值margin抵消掉。这样，列中的所有内容都左对齐的。
• 在一个网格布局中，内容必须放在列中，而且行的直接子元素必须是列。
• 借助flexbox，网格列不用指定宽度，就能自动等宽。例如，四个带有.col-sm的元素在sm断点及以上范围，会自动布局成每个25%宽。在auto-layout columns可以看到更多实例。
• col类表明了你要使用的列的个数（每行12列）。所以，如果你想要实现三等宽列，你可以用.col-4。
• 列的宽度用百分比设置，所以它们总是fluid的，宽度取决于它们的父容器。
• 列用水平方向的padding来创建gutter，但你可以在行.row上增加类名no-gutter来移除行的margin和列的padding。
• 为了使网格实现响应式，Bootstrap设置了五个网格断点，每个对应一个响应式断点。
• 网格断点基于媒体查询的最小宽度，意思就是它们对应该断点及以上范围（例如：.col-sm-4的样式应用于从小型开始到超大型的设备，但不包括xs断点）。
• 你可以针对更多的语义化标记，预定义网格类（类似.col-4）或者Sassmixin。

注意有一些关于Flexbox的Bug的限制，比如 inability to use some HTML elements as flex containers。

---

网格的可选项

Bootstrap使用em和rem做为尺寸单位，px做为网格断点和container的宽度的单位。这是因为视口宽度是以像素为单位的，并不随着字号改变。

来看看Bootstrap网格的各个方面是如何跨设备运行的：

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	无(auto)	540px	720px	960px	1140px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg	.col-xl-
# of columns	12
Gutter width	30px (列的每侧各15px)
Nestable	支持
Column ordering	支持

---

自动布局列

利用指定断点的列类名设定宽度。

等宽

例如，这里有两个网格布局，它们适应所有设备和视口。根据断点添加无单位的类名，每个列就等宽了。

<div class="container">
    <!--↓二等宽↓-->
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
  </div>
  
    <!--↓三等宽↓-->
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"> </div>
  </div>
</div>
复制代码

等宽的列可以拆分进多行，但此处有个Safari中Flexbox的bug，没有指定flex-basis或border的情况下无效。对于一些旧版浏览器，有一些变通方法，但如果你的浏览器版本最新，就没必要了。

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <!--折行，w-100代表width:100%-->
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
复制代码

设置单个列的宽度

自动布局意味着你可以设置某个列，让它的兄弟元素自动宽度。你可以使用预定义的网格类、网格mixin或者行内宽度。注意，其他的列会重新调整尺寸。

<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col-6"></div>
    <div class="col"></div>
  </div>
  
  <div class="row">
    <div class="col"></div>
    <div class="col-5"></div>
    <div class="col">
    </div>
  </div>
</div>
复制代码

宽度可变的内容

使用col-{breakpoint}-auto类，让列根据自然宽度决定尺寸。

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2"></div>
    <div class="col-md-auto"></div>
    <div class="col col-lg-2"></div>
  </div>
  
  <div class="row">
    <div class="col"></div>
    <div class="col-md-auto"></div>
    <div class="col col-lg-2"></div>
  </div>
</div>
复制代码

多行等宽

创建跨多行的等宽列，可以在你想要折行的地方插入.w-100。

<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>
复制代码

---

响应式类

Bootstrap网格包括五个等级的预定义类，用来构建复杂的响应式布局。你可以根据情况随意自定义你的列在五中尺寸设备上的表现。

所有断点

如果网格在不同尺寸设备上布局相同，使用.col和.col-*类就可以。如果你需要特别设定列宽度，就在类名后面加上数字；而默认是等宽的。

<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-*类，你可以创建一个基本的网格系统，在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>
复制代码

Mix和Match

不想为某个级别尺寸的设备设置单独的排列样式吗？使用不同类的组合在达到目的。看下面的例子就明白了：

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

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

<div class="row">
  <div class="col-6"></div>
  <div class="col-6"></div>
</div>
复制代码

---

对齐

使用flexbox对齐类，可以竖直、水平方向对齐列。

竖直对齐

整行的竖直对齐

<div class="container">
  <div class="row align-items-start">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
  <div class="row align-items-center">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
  <div class="row align-items-end">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>
复制代码

行中单个列的竖直对齐

<div class="container">
  <div class="row">
    <div class="col align-self-start"></div>
    <div class="col align-self-center"></div>
    <div class="col align-self-end"></div>
  </div>
</div>
复制代码

水平对齐

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4"></div>
    <div class="col-4"></div>
  </div>
</div>
复制代码

无gutter

列之间的gutter可以用.no-gutter消除。这个类移除了.row的margin和其子列的水平padding。

下面是源码。注意，列的样式重写只对第一个子列有效，用的是属性选择器。这样就生成了一个更具体的选择器，列的padding仍可以用spacing类来自定义。

**需要edge-to-edge的设计？**用.container或.container-fluid作为父容器。

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

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

你可以继续使用所有其他预定义的网格类（包括列宽、响应式等级、重排序等）。

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8"></div>
  <div class="col-6 col-md-4"></div>
</div>
复制代码

列的包裹（Column wrapping）

如果一行中的列超过了12个，每组超出的列都会作为一个单元占据新的一行。

<div class="row">
  <div class="col-9"></div>
  <div class="col-4"></div>
  <div class="col-6"></div>
</div>
复制代码

列的分行

把列拆分到新行需要一点小手段：添加一个宽度100%的元素。一般情况下，这应该用多个.row实现，但不是每个实现方法都这样。

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

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

  <div class="col-6 col-sm-3"></div>
  <div class="col-6 col-sm-3"></div>
</div>
复制代码

你也可以用响应式的显示类根据特定断点打破行。

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

  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4"></div>
  <div class="col-6 col-sm-4"></div>
</div>
复制代码

---

重排序

有序类

使用.order-来控制内容的视觉顺序。这些类是响应式的，所以你可以用断点设置order（比如，.order-1.order-md-2)。支持五个等级从1到12的序号。

<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col order-12"></div>
    <div class="col order-1"></div>
  </div>
</div>
复制代码

还有.order-first、.order-last类，二者分别把order设置为-1和13。这些类也可以和带数字的排序类名混用。

<div class="container">
  <div class="row">
    <div class="col order-last"></div>
    <div class="col"></div>
    <div class="col order-first"></div>
  </div>
</div>
复制代码

列的偏移

你可以用两种方式把列偏移：.offset-类和margin类。网格类会调整大小来匹配列，当偏移宽度变化时，margin更有用。

offset类

把列向右移动，使用.offset-md-*类。这些类加大了左侧margin，距离就是类中的数字。例如，.offset-md-4把.col-md-4向右移动了四个列的距离。

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4 offset-md-4"></div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3"></div>
  <div class="col-md-3 offset-md-3"></div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3"></div>
</div>
复制代码

除了在断点清除掉offset外，你可能需要重设offset。见网格例子。

<div class="row">
  <div class="col-sm-5 col-md-6"></div>
  <div class="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"></div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0"></div>
</div>
复制代码

margin类

你可以使用类似.mr-auto的margin类，来分隔列。

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4 ml-auto"></div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto"></div>
  <div class="col-md-3 ml-md-auto"></div>
</div>
<div class="row">
  <div class="col-auto mr-auto"></div>
  <div class="col-auto"></div>
</div>
复制代码

---

嵌套

为了嵌套内容，你可以在已经存在的列中添加新的.row和一系列.col。嵌套的行应该有不超过十二个列。

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

当使用Bootstrap的Sass源文件，你可以使用Sass的变量和mixin来创建自定义的、语义化的、响应式的页面布局。我们的预定义类使用同样的变量和mixin，为快速构建响应式布局提供整套随时可用的类。

变量

变量和映射决定了列的数量、gutter的宽度以及媒体查询点。我们使用这些变量来生成上面列举到的预定义类，下面还有一些自定义的mixin。

$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
);
复制代码

Mixin

mixin连同变量一起生成语义化的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);
复制代码

---

使用示例

你可以把变量修改成自定义的值，或者仅仅是使用默认值。下面是一个使用默认设置创建两列布局的例子：

.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);
  }
}
复制代码

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main"></div>
    <div class="example-content-secondary"></div>
  </div>
</div>
复制代码

---

定制化的网格

使用内置的Sass变量和映射，让完全定制预定义的网格类成为可能。改变断点等级的数字、媒体查询维度，以及容器宽度——重新编译。

列和gutter

列的数量可以通过Sass变量的来修改。$gird-columns用来生成宽度（百分比），$gird-gutter-width设置gutter的宽度。

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
复制代码

网格层级

除了列本身，你还可以自定义网格层级的数量。假如你只想要4个层级，你可以这样更新$gird-breakpoints和$container-max-widths：

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

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

当改变Sass变量或映射，你会需要保存你的更改并重新编译。这样做会输出一系列全新的预定义类。响应式可见类也随之更新。确保用px作为单位（而不是rem、em或%）。