網格（Grid）
使用我們強大、行動優先的彈性盒子的網格來建立符合各種尺寸的網頁排版，包含十二欄系統、六個缺省的響應式斷點、Sass變量和mixins，以及很多預定義的類。
例子
Bootstrap的網格系統使用一系列容器、行和列來布局和對齊內容。它采用彈性盒子設計，反應靈敏。下面是一個示例，深入解釋了網格系統是如何組合在一起的。
<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的頁面中居中。
工作原理
將其分解，以下是網格系統是如何組合在一起的：
-
我們的網格支持六個響應斷點。 斷點基于最小寬度媒體查詢，這意味著它們會影響該斷點及其上的所有斷點（例如，col-sm-4適用于sm、md、lg、xl和xxl）。這意味著您可以通過每個斷點控制容器和列的大小以及行為。
-
容器居中并水平放置內容。 使用
.container表示響應像素寬度，.container-fluid表示寬度：100%覆蓋所有視口和設備，或使用響應容器（例如..container-md)）表示流體和像素寬度的組合。 -
行是列的包裝器。 每列都有水平填充（稱為間隙），用于控制它們之間的間距。然后在具有負邊距的行上抵消此填充，以確保列中的內容在視覺上與左側對齊。行還支持修改器類來統一應用列大小調整，并支持邊距類來更改內容的間距。
-
列非常靈活。 每行有12個模板列可用，允許您創建跨任意列數的不同元素組合。列類表示要跨越的模板列的數量（例如，
col-4跨越四個列）。寬度是按百分比設置的，因此相對大小總是相同的。 -
間隙也響應和定制。 所有斷點上都可以使用Gutter類，其大小與邊距和填充間距相同。將水平間隙更改為.gx-*類，將垂直間隙更改為.gy-*類，或將所有間隙更改為.g-*類。g-0也可用于移除間隙。
-
Sass variables, maps, and mixins power the grid. If you don’t want to use the predefined grid classes in Bootstrap, you can use our grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you. Sass變量、地圖和mixin為電網供電。如果您不想在Bootstrap中使用預定義的網格類，您可以使用我們的網格源Sass創建您自己的具有更多語義標記的網格類。我們還包括一些CSS自定義屬性來使用這些Sass變量，為您提供更大的靈活性。
注意flexbox的局限性和缺陷，比如不能將一些HTML元素用作flex容器。 inability to use some HTML elements as flex containers.
網格選項
Bootstrap的網格系統可以適應所有六個默認斷點，以及您自定義的任何斷點。六個默認網格層如下所示：
- 超小型 (xs)
- 小型 (sm)
- 中等 (md)
- 大 (lg)
- 特大 (xl)
- 超特大 (xxl)
如上所述，每個斷點都有自己的容器、唯一的類前綴和修飾符。以下是網格如何跨越這些斷點進行更改：
|
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
Container max-width |
None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| # of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
自動布局列
利用特定于斷點的列類來輕松調整列大小，而不需要顯式的編號類，如.col-sm-6。
等寬
例如，這里有兩個網格布局，適用于從xs到xxl的每個設備和窗口。為每個斷點添加任意數量的無單元類，每個列的寬度都相同。
<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>設置一個列寬
彈性盒子網格列的自動布局還意味著您可以設置一列的寬度，并使其周圍的同級列自動調整大小。您可以使用預定義的網格類（如下所示）、網格混合或內聯寬度。請注意，無論中心列的寬度如何，其他列都將調整大小。
<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>響應類
Bootstrap的網格包括六層預定義的類，用于構建復雜的響應性布局。在您認為合適的超小型、小型、中型、大型或超大型設備上自定義列的大小。
所有斷點
對于從最小設備到最大設備都相同的網格，請使用.col和.col-*類。當需要特別大的列時，指定一個大小編號的類；否則，請隨意堅持。
<div class="container">
<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>
</div>水平堆放
使用一組.col sm-*類，可以創建一個基本的網格系統，該系統從堆疊開始，在小斷點（sm）處變為水平。
<div class="container">
<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>
</div>混合和匹配
不希望列簡單地堆疊在一些網格層中嗎？根據需要為每一層使用不同類的組合。請參閱下面的示例，以更好地了解其工作原理
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.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>
</div>行和列
使用.row-cols-*類快速設置最能呈現內容和布局的列數。普通的.col-*類應用于各個列（例如.col-md-4），而.row-cols-auto類是作為快捷方式在父.row上設置的。使用.row-cols-auto可以為列指定其自然寬度。
使用這些行-列類可以快速創建基本網格布局或控制卡片布局。
<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><div class="container">
<div class="row row-cols-auto">
<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">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><div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>You can also use the accompanying 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);
}
}
嵌套
要使用默認網格嵌套內容，請在現有的.col sm-*列中添加一個新的.row和一組.col sm-*列。嵌套行應包含一組最多12個或更少的列（不要求使用所有12個可用列）。
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="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>Sass
使用Bootstrap程序的源Sass文件時，可以選擇使用Sass變量和mixin來創建自定義、語義和響應頁面布局。我們預定義的網格類使用這些相同的變量和mixin來為快速響應的布局提供一整套現成的類。
變量
變量和映射決定了列數、槽寬度以及開始浮動列的媒體查詢點。我們使用這些來生成上面記錄的預定義網格類，以及下面列出的定制mixin。
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Mixins
Mixins與網格變量一起使用，為單個網格列生成語義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);
例子
您可以將變量修改為自己的自定義值，或者只使用帶有默認值的mixin。下面是一個使用默認設置創建兩列之間有間隙的布局的示例。
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.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">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>自定義網格
使用我們內置的網格Sass變量和映射，可以完全定制預定義的網格類。更改層數、媒體查詢維度和容器寬度，然后重新編譯。
列和間隙
可以通過Sass變量修改網格列的數量$grid columns用于生成每個單獨列的寬度（以百分比為單位），而$grid gutter width用于設置列間隙的寬度
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !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變量或映射進行任何更改時，需要保存更改并重新編譯。這樣做將輸出一組全新的預定義網格類，用于列寬、偏移和排序。響應可見性實用程序也將更新為使用自定義斷點。確保以px（而不是rem、em或%）設置網格值。