網(wǎng)格（Grid）
使用我們強大、行動優(yōu)先的彈性盒子的網(wǎng)格來建立符合各種尺寸的網(wǎng)頁排版，包含十二欄系統(tǒng)、六個缺省的響應(yīng)式斷點、Sass變量和mixins，以及很多預(yù)定義的類。
例子
Bootstrap的網(wǎng)格系統(tǒng)使用一系列容器、行和列來布局和對齊內(nèi)容。它采用彈性盒子設(shè)計，反應(yīng)靈敏。下面是一個示例，深入解釋了網(wǎng)格系統(tǒng)是如何組合在一起的。
<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>上面的示例使用預(yù)定義的網(wǎng)格類在所有設(shè)備和窗口中創(chuàng)建三個等寬列。這些列在帶有.container的頁面中居中。
工作原理
將其分解，以下是網(wǎng)格系統(tǒng)是如何組合在一起的：
-
我們的網(wǎng)格支持六個響應(yīng)斷點。 斷點基于最小寬度媒體查詢，這意味著它們會影響該斷點及其上的所有斷點（例如，col-sm-4適用于sm、md、lg、xl和xxl）。這意味著您可以通過每個斷點控制容器和列的大小以及行為。
-
容器居中并水平放置內(nèi)容。 使用
.container表示響應(yīng)像素寬度，.container-fluid表示寬度：100%覆蓋所有視口和設(shè)備，或使用響應(yīng)容器（例如..container-md)）表示流體和像素寬度的組合。 -
行是列的包裝器。 每列都有水平填充（稱為間隙），用于控制它們之間的間距。然后在具有負邊距的行上抵消此填充，以確保列中的內(nèi)容在視覺上與左側(cè)對齊。行還支持修改器類來統(tǒng)一應(yīng)用列大小調(diào)整，并支持邊距類來更改內(nèi)容的間距。
-
列非常靈活。 每行有12個模板列可用，允許您創(chuàng)建跨任意列數(shù)的不同元素組合。列類表示要跨越的模板列的數(shù)量（例如，
col-4跨越四個列）。寬度是按百分比設(shè)置的，因此相對大小總是相同的。 -
間隙也響應(yīng)和定制。 所有斷點上都可以使用Gutter類，其大小與邊距和填充間距相同。將水平間隙更改為.gx-*類，將垂直間隙更改為.gy-*類，或?qū)⑺虚g隙更改為.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為電網(wǎng)供電。如果您不想在Bootstrap中使用預(yù)定義的網(wǎng)格類，您可以使用我們的網(wǎng)格源Sass創(chuàng)建您自己的具有更多語義標記的網(wǎng)格類。我們還包括一些CSS自定義屬性來使用這些Sass變量，為您提供更大的靈活性。
注意flexbox的局限性和缺陷，比如不能將一些HTML元素用作flex容器。 inability to use some HTML elements as flex containers.
網(wǎng)格選項
Bootstrap的網(wǎng)格系統(tǒng)可以適應(yīng)所有六個默認斷點，以及您自定義的任何斷點。六個默認網(wǎng)格層如下所示：
- 超小型 (xs)
- 小型 (sm)
- 中等 (md)
- 大 (lg)
- 特大 (xl)
- 超特大 (xxl)
如上所述，每個斷點都有自己的容器、唯一的類前綴和修飾符。以下是網(wǎng)格如何跨越這些斷點進行更改：
|
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 | |||||
自動布局列
利用特定于斷點的列類來輕松調(diào)整列大小，而不需要顯式的編號類，如.col-sm-6。
等寬
例如，這里有兩個網(wǎng)格布局，適用于從xs到xxl的每個設(shè)備和窗口。為每個斷點添加任意數(shù)量的無單元類，每個列的寬度都相同。
<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>設(shè)置一個列寬
彈性盒子網(wǎng)格列的自動布局還意味著您可以設(shè)置一列的寬度，并使其周圍的同級列自動調(diào)整大小。您可以使用預(yù)定義的網(wǎng)格類（如下所示）、網(wǎng)格混合或內(nèi)聯(lián)寬度。請注意，無論中心列的寬度如何，其他列都將調(diào)整大小。
<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>可變寬度內(nèi)容
使用col-{breakpoint}-auto類根據(jù)列內(nèi)容的自然寬度調(diào)整列的大小。
<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>響應(yīng)類
Bootstrap的網(wǎng)格包括六層預(yù)定義的類，用于構(gòu)建復(fù)雜的響應(yīng)性布局。在您認為合適的超小型、小型、中型、大型或超大型設(shè)備上自定義列的大小。
所有斷點
對于從最小設(shè)備到最大設(shè)備都相同的網(wǎng)格，請使用.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-*類，可以創(chuàng)建一個基本的網(wǎng)格系統(tǒng)，該系統(tǒng)從堆疊開始，在小斷點（sm）處變?yōu)樗健?/p>
<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>混合和匹配
不希望列簡單地堆疊在一些網(wǎng)格層中嗎？根據(jù)需要為每一層使用不同類的組合。請參閱下面的示例，以更好地了解其工作原理
<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-*類快速設(shè)置最能呈現(xiàn)內(nèi)容和布局的列數(shù)。普通的.col-*類應(yīng)用于各個列（例如.col-md-4），而.row-cols-auto類是作為快捷方式在父.row上設(shè)置的。使用.row-cols-auto可以為列指定其自然寬度。
使用這些行-列類可以快速創(chuàng)建基本網(wǎng)格布局或控制卡片布局。
<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);
}
}
嵌套
要使用默認網(wǎng)格嵌套內(nèi)容，請在現(xiàn)有的.col sm-*列中添加一個新的.row和一組.col sm-*列。嵌套行應(yīng)包含一組最多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來創(chuàng)建自定義、語義和響應(yīng)頁面布局。我們預(yù)定義的網(wǎng)格類使用這些相同的變量和mixin來為快速響應(yīng)的布局提供一整套現(xiàn)成的類。
變量
變量和映射決定了列數(shù)、槽寬度以及開始浮動列的媒體查詢點。我們使用這些來生成上面記錄的預(yù)定義網(wǎng)格類，以及下面列出的定制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與網(wǎng)格變量一起使用，為單個網(wǎng)格列生成語義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。下面是一個使用默認設(shè)置創(chuàng)建兩列之間有間隙的布局的示例。
.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>自定義網(wǎng)格
使用我們內(nèi)置的網(wǎng)格Sass變量和映射，可以完全定制預(yù)定義的網(wǎng)格類。更改層數(shù)、媒體查詢維度和容器寬度，然后重新編譯。
列和間隙
可以通過Sass變量修改網(wǎng)格列的數(shù)量$grid columns用于生成每個單獨列的寬度（以百分比為單位），而$grid gutter width用于設(shè)置列間隙的寬度
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
網(wǎng)格層
除了列本身之外，還可以自定義網(wǎng)格層的數(shù)量。如果您只需要四個網(wǎng)格層，您可以將$grid breakpoints和$container max widths更新為如下內(nèi)容：
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
對Sass變量或映射進行任何更改時，需要保存更改并重新編譯。這樣做將輸出一組全新的預(yù)定義網(wǎng)格類，用于列寬、偏移和排序。響應(yīng)可見性實用程序也將更新為使用自定義斷點。確保以px（而不是rem、em或%）設(shè)置網(wǎng)格值。