释放双眼，带上耳机，听听看~！
Bootstrap 栅格系统（Grid System）
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
运行示例
Bootstrap的网格系统使用一系列容器，行和列来布局和对齐内容。它是使用flexbox构建的，具有完全的响应能力。下面是一个示例，并深入研究了网格如何组合在一起。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2 <div class="row">
3 <div class="col-sm">
4 One of three columns
5 </div>
6 <div class="col-sm">
7 One of three columns
8 </div>
9 <div class="col-sm">
10 One of three columns
11 </div>
12 </div>
13</div>
14
15
上面的示例使用预定义的网格类在小型，中型，大型和超大型设备上创建了三个等宽列。这些列与父项一起位于页面的中心.container。
工作原理
- 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）；
- 使用行来创建列的水平组；
- 内容应该放置在列内，且唯有列可以是行的直接子元素；
- 预定义的栅格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局；
- 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移；
- 栅格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4；
栅格选项
下表总结了 Bootstrap 栅格系统如何跨多个设备工作：
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034748-94.png)
自动布局列
利用特定于断点的列类来简化列大小，而无需使用类似的显式编号类.col-sm-6。
等宽
例如，以下是两个网格布局，从xs到分别应用于每个设备和视口xl。为所需的每个断点添加任意数量的无单元类，每列的宽度将相同。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2 <div class="row">
3 <div class="col">
4 1 of 2
5 </div>
6 <div class="col">
7 2 of 2
8 </div>
9 </div>
10 <div class="row">
11 <div class="col">
12 1 of 3
13 </div>
14 <div class="col">
15 2 of 3
16 </div>
17 <div class="col">
18 3 of 3
19 </div>
20 </div>
21</div>
22
23
等宽多行
通过插入一个.w-100实现列换行，来创建跨多行的等宽列。通过.w-100与一些响应性显示实用程序混合使用，使响应具有响应性。
同
同
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2 <div class="row">
3 <div class="col">col</div>
4 <div class="col">col</div>
5 <div class="w-100"></div>
6 <!--
7 Force next columns to break to new line at md breakpoint and up
8 <div class="w-100 d-none d-md-block"></div>
9 -->
10 <div class="col">col</div>
11 <div class="col">col</div>
12 </div>
13</div>
14
15
设置一列宽度
Flexbox网格列的自动布局还意味着您可以设置一列的宽度，并使同级列在其周围自动调整大小。您可以使用预定义的网格类（如下所示），网格混合或内联宽度。请注意，无论中间列的宽度如何，其他列都会调整大小。
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034750-10.png)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2 <div class="row">
3 <div class="col">
4 1 of 3
5 </div>
6 <div class="col-6">
7 2 of 3 (wider)
8 </div>
9 <div class="col">
10 3 of 3
11 </div>
12 </div>
13 <div class="row">
14 <div class="col">
15 1 of 3
16 </div>
17 <div class="col-5">
18 2 of 3 (wider)
19 </div>
20 <div class="col">
21 3 of 3
22 </div>
23 </div>
24</div>
25
26
可变宽度内容
使用col-{breakpoint}-auto类可根据其内容的自然宽度来调整列的大小。
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034751-95.png)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2 <div class="row justify-content-md-center">
3 <div class="col col-lg-2">
4 1 of 3
5 </div>
6 <div class="col-md-auto">
7 Variable width content
8 </div>
9 <div class="col col-lg-2">
10 3 of 3
11 </div>
12 </div>
13 <div class="row">
14 <div class="col">
15 1 of 3
16 </div>
17 <div class="col-md-auto">
18 Variable width content
19 </div>
20 <div class="col col-lg-2">
21 3 of 3
22 </div>
23 </div>
24</div>
25
26
Responsive classes
行列
使用响应式.row-cols-*类来快速设置最能呈现内容和布局的列数。普通.col-*类适用于各个列（例如.col-md-4），而行列类在父级上设置.row为快捷方式。
使用这些行列类可以快速创建基本的网格布局或控制您的卡片布局。
Column
Column
2
3
4
5
6
7
8
9
10
2 <div class="row row-cols-2">
3 <div class="col">Column</div>
4 <div class="col">Column</div>
5 <div class="col">Column</div>
6 <div class="col">Column</div>
7 </div>
8</div>
9
10
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034751-63.png)
2
3
4
5
6
7
8
9
10
2 <div class="row row-cols-3">
3 <div class="col">Column</div>
4 <div class="col">Column</div>
5 <div class="col">Column</div>
6 <div class="col">Column</div>
7 </div>
8</div>
9
10
2
3
4
5
6
7
8
9
10
2 <div class="row row-cols-4">
3 <div class="col">Column</div>
4 <div class="col">Column</div>
5 <div class="col">Column</div>
6 <div class="col">Column</div>
7 </div>
8</div>
9
10
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034753-42.png)
2
3
4
5
6
7
8
9
10
2 <div class="row row-cols-4">
3 <div class="col">Column</div>
4 <div class="col">Column</div>
5 <div class="col-6">Column</div>
6 <div class="col">Column</div>
7 </div>
8</div>
9
10
您还可以使用随附的Sass mixin row-cols()：
2
3
4
5
6
7
8
9
10
11
2 // Three columns to start
3 @include row-cols(3);
4
5 // Five columns from medium breakpoint up
6 @include media-breakpoint-up(md) {
7 @include row-cols(5);
8 }
9}
10
11
对准
垂直对齐
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034754-85.png)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2 <div class="row align-items-start">
3 <div class="col">
4 One of three columns
5 </div>
6 <div class="col">
7 One of three columns
8 </div>
9 <div class="col">
10 One of three columns
11 </div>
12 </div>
13 <div class="row align-items-center">
14 <div class="col">
15 One of three columns
16 </div>
17 <div class="col">
18 One of three columns
19 </div>
20 <div class="col">
21 One of three columns
22 </div>
23 </div>
24 <div class="row align-items-end">
25 <div class="col">
26 One of three columns
27 </div>
28 <div class="col">
29 One of three columns
30 </div>
31 <div class="col">
32 One of three columns
33 </div>
34 </div>
35</div>
36
37
水平对齐
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034756-66.png)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2 <div class="row justify-content-start">
3 <div class="col-4">
4 One of two columns
5 </div>
6 <div class="col-4">
7 One of two columns
8 </div>
9 </div>
10 <div class="row justify-content-center">
11 <div class="col-4">
12 One of two columns
13 </div>
14 <div class="col-4">
15 One of two columns
16 </div>
17 </div>
18 <div class="row justify-content-end">
19 <div class="col-4">
20 One of two columns
21 </div>
22 <div class="col-4">
23 One of two columns
24 </div>
25 </div>
26 <div class="row justify-content-around">
27 <div class="col-4">
28 One of two columns
29 </div>
30 <div class="col-4">
31 One of two columns
32 </div>
33 </div>
34 <div class="row justify-content-between">
35 <div class="col-4">
36 One of two columns
37 </div>
38 <div class="col-4">
39 One of two columns
40 </div>
41 </div>
42</div>
43
44
No-gutters
可以使用删除预定义网格类别中列之间的间距.no-gutters。这会从所有直接子列中删除负数margins .row并padding从所有直属子列中删除水平数。
这是用于创建这些样式的源代码。请注意，列替代仅适用于第一个子列，并通过属性选择器定位。尽管这会生成更具体的选择器，但仍可以使用interval实用程序进一步自定义列填充。
2
3
4
5
6
7
8
9
10
11
12
2 margin-right: 0;
3 margin-left: 0;
4
5 > .col,
6 > [class*="col-"] {
7 padding-right: 0;
8 padding-left: 0;
9 }
10}
11
12
实际上，这是它的外观。请注意，您可以继续将其与所有其他预定义的网格类（包括列宽，响应层，重新排序等）一起使用。
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034757-8.png)
2
3
4
5
6
2 <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
3 <div class="col-6 col-md-4">.col-6 .col-md-4</div>
4</div>
5
6
Column Wrapping
如果在一行中放置超过12列，则每组额外的列将作为一个单元包装到新行上。
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034759-5.png)
2
3
4
5
6
7
8
9
2 <div class="row">
3 <div class="col-9">.col-9</div>
4 <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>
5 <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
6 </div>
7</div>
8
9
Reordering
Order classes
使用.order-类来控制内容的视觉顺序。这些类是响应式的，因此您可以order按断点设置（例如.order-1.order-md-2）。包括支持1通过12所有五格层。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2 <div class="row">
3 <div class="col">
4 First in DOM, no order applied
5 </div>
6 <div class="col order-12">
7 Second in DOM, with a larger order
8 </div>
9 <div class="col order-1">
10 Third in DOM, with an order of 1
11 </div>
12 </div>
13</div>
14
15
也有响应式.order-first和.order-last类分别order通过应用order: -1和order: 13（order: $columns + 1）来更改元素的。这些类也可以.order-* 根据需要与编号的类混合。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2 <div class="row">
3 <div class="col order-last">
4 First in DOM, ordered last
5 </div>
6 <div class="col">
7 Second in DOM, unordered
8 </div>
9 <div class="col order-first">
10 Third in DOM, ordered first
11 </div>
12 </div>
13</div>
14
15
Offsetting columns
您可以通过两种方式来抵消网格列：我们的响应.offset-网格类和利润工具。网格类的大小可匹配列，而边距对于偏移宽度可变的快速布局更有用。
Offset classes
使用.offset-md-类将列向右移动。这些类逐列增加一列的左边距。例如，.offset-md-4移至.col-md-4四列。
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034800-87.png)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2 <div class="row">
3 <div class="col-md-4">.col-md-4</div>
4 <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
5 </div>
6 <div class="row">
7 <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
8 <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
9 </div>
10 <div class="row">
11 <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
12 </div>
13</div>
14
15
除了在响应断点处清除列外，您可能还需要重置偏移量。请参见网格示例中的实际操作。
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034802-52.png)
2
3
4
5
6
7
8
9
10
11
12
2 <div class="row">
3 <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
4 <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>
5 </div>
6 <div class="row">
7 <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
8 <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>
9 </div>
10</div>
11
12
Margin utilities
随着v4中向flexbox的迁移，您可以使用margin实用程序，例如，.mr-auto将同级列强制彼此分开。
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034803-93.png)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2 <div class="row">
3 <div class="col-md-4">.col-md-4</div>
4 <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
5 </div>
6 <div class="row">
7 <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
8 <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
9 </div>
10 <div class="row">
11 <div class="col-auto mr-auto">.col-auto .mr-auto</div>
12 <div class="col-auto">.col-auto</div>
13 </div>
14</div>
15
16
Nesting
要将内容与默认网格嵌套，请在现有列中添加新列.row和一组列。嵌套行应包括一组总计不超过12个或更少的列（不需要全部使用12个可用列）。.col-sm-* .col-sm-*
![Bootstrap Grid system [布局：栅格系统]](https://aqzt.com/wp-content/uploads/20220223034805-52.png)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2 <div class="row">
3 <div class="col-sm-9">
4 Level 1: .col-sm-9
5 <div class="row">
6 <div class="col-8 col-sm-6">
7 Level 2: .col-8 .col-sm-6
8 </div>
9 <div class="col-4 col-sm-6">
10 Level 2: .col-4 .col-sm-6
11 </div>
12 </div>
13 </div>
14 </div>
15</div>
16
17
Variables
变量和映射确定列数，装订线宽度以及开始浮动列的媒体查询点。我们使用它们来生成上面记录的预定义网格类，以及下面列出的自定义混合类。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2$grid-gutter-width: 30px;
3
4$grid-breakpoints: (
5 // Extra small screen / phone
6 xs: 0,
7 // Small screen / phone
8 sm: 576px,
9 // Medium screen / tablet
10 md: 768px,
11 // Large screen / desktop
12 lg: 992px,
13 // Extra large screen / wide desktop
14 xl: 1200px
15);
16
17$container-max-widths: (
18 sm: 540px,
19 md: 720px,
20 lg: 960px,
21 xl: 1140px
22);
23
24
参考文献：
https://www.runoob.com/bootstrap/bootstrap-grid-system.html
https://v4.bootcss.com/docs/layout/grid/\#responsive-classes
