Bootstrap 栅格系统（Grid System）
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
运行示例
Bootstrap的网格系统使用一系列容器，行和列来布局和对齐内容。它是使用flexbox构建的，具有完全的响应能力。下面是一个示例，并深入研究了网格如何组合在一起。
| 三列之一 | 三列之一 | 三列之一 |
|---|
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
上面的示例使用预定义的网格类在小型，中型，大型和超大型设备上创建了三个等宽列。这些列与父项一起位于页面的中心.container。
工作原理
- 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）；
- 使用行来创建列的水平组；
- 内容应该放置在列内，且唯有列可以是行的直接子元素；
- 预定义的栅格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局；
- 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移；
- 栅格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4；
栅格选项
下表总结了 Bootstrap 网格系统如何跨多个设备工作：
自动布局列
利用特定于断点的列类来简化列大小，而无需使用类似的显式编号类.col-sm-6。
等宽
例如，以下是两个网格布局，从xs到分别应用于每个设备和视口xl。为所需的每个断点添加任意数量的无单元类，每列的宽度将相同。
| 1之2 | 2之2 |
|---|
| 1之3 | 2之3 | 3之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>
等宽多行
通过插入一个.w-100实现列换行，来创建跨多行的等宽列。通过.w-100与一些响应性显示实用程序混合使用，使响应具有响应性。
| 同 | 同 |
|---|---|
| 同 | 同 |
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></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">col</div>
<div class="col">col</div>
</div>
</div>
设置一列宽度
Flexbox网格列的自动布局还意味着您可以设置一列的宽度，并使同级列在其周围自动调整大小。您可以使用预定义的网格类（如下所示），网格混合或内联宽度。请注意，无论中间列的宽度如何，其他列都会调整大小。
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</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 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
可变宽度内容
使用col-{breakpoint}-auto类可根据其内容的自然宽度来调整列的大小。
<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>
Responsive classes
行列
使用响应式.row-cols-*类来快速设置最能呈现内容和布局的列数。普通.col-*类适用于各个列（例如.col-md-4），而行列类在父级上设置.row为快捷方式。
使用这些行列类可以快速创建基本的网格布局或控制您的卡片布局。
| Column | Column |
|---|---|
| Column | Column |
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
| Column | Column | Column | Column |
|---|
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
您还可以使用随附的Sass mixin row-cols()：
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
对准
垂直对齐
<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 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>
No-gutters
可以使用删除预定义网格类别中列之间的间距.no-gutters。这会从所有直接子列中删除负数margins .row并padding从所有直属子列中删除水平数。
这是用于创建这些样式的源代码。请注意，列替代仅适用于第一个子列，并通过属性选择器定位。尽管这会生成更具体的选择器，但仍可以使用interval实用程序进一步自定义列填充。
.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-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Column Wrapping
如果在一行中放置超过12列，则每组额外的列将作为一个单元包装到新行上。
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-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-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Reordering
Order classes
使用.order-类来控制内容的视觉顺序。这些类是响应式的，因此您可以order按断点设置（例如.order-1.order-md-2）。包括支持1通过12所有五格层。
| First in DOM, no order applied | Third in DOM, with an order of 1 | Second in DOM, with a larger order |
|---|
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
也有响应式.order-first和.order-last类分别order通过应用order: -1和order: 13（order: $columns + 1）来更改元素的。这些类也可以.order-* 根据需要与编号的类混合。
| Third in DOM, ordered first | Second in DOM, unordered | First in DOM, ordered last |
|---|
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Offsetting columns
您可以通过两种方式来抵消网格列：我们的响应.offset-网格类和利润工具。网格类的大小可匹配列，而边距对于偏移宽度可变的快速布局更有用。
Offset classes
使用.offset-md-类将列向右移动。这些类逐列增加一列的左边距。例如，.offset-md-4移至.col-md-4四列。
<div class="container">
<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>
</div>
除了在响应断点处清除列外，您可能还需要重置偏移量。请参见网格示例中的实际操作。
<div class="container">
<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-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>
</div>
Margin utilities
随着v4中向flexbox的迁移，您可以使用margin实用程序，例如，.mr-auto将同级列强制彼此分开。
<div class="container">
<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>
</div>
Nesting
要将内容与默认网格嵌套，请在现有列中添加新列.row和一组列。嵌套行应包括一组总计不超过12个或更少的列（不需要全部使用12个可用列）。.col-sm-* .col-sm-*
<div class="container">
<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>
</div>
Variables
变量和映射确定列数，装订线宽度以及开始浮动列的媒体查询点。我们使用它们来生成上面记录的预定义网格类，以及下面列出的自定义混合类。
$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
);
参考文献：
https://www.runoob.com/bootstrap/bootstrap-grid-system.html
https://v4.bootcss.com/docs/layout/grid/#responsive-classes