?
This document uses PHP Chinese website manual Release
使用我們功能強(qiáng)大的移動(dòng)優(yōu)先 Flexbox 網(wǎng)格來構(gòu)建所有形狀和大小的布局，這要?dú)w功于十二列系統(tǒng)，五個(gè)默認(rèn)響應(yīng)層，Sass 變量和 mixin 以及數(shù)十個(gè)預(yù)定義的類。
運(yùn)行方式
Bootstrap 的網(wǎng)格系統(tǒng)使用一系列容器，行和列來布局和對(duì)齊內(nèi)容。它使用 flexbox 構(gòu)建，并且完全響應(yīng)。下面是一個(gè)例子，并深入研究 Grid 如何結(jié)合在一起。
新的或不熟悉的 Flexbox？ 閱讀 CSS 技巧 Flexbox 指南了解背景，術(shù)語，指導(dǎo)原則和代碼片段。
<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)建三個(gè)等寬列。這些列在父頁面的中心位置.container。
分解它，下面是它的工作原理：
容器提供了一種中心和水平填充網(wǎng)站內(nèi)容的方法。使用
.container了應(yīng)答像素寬度或.container-fluid用于width: 100%在所有視窗和器件尺寸。
行是列的包裝。每列都有水平的
padding（稱為陰溝）來控制它們之間的空間。這padding隨后抵消上切緣陰性的行。這樣，列中的所有內(nèi)容都可以在左側(cè)進(jìn)行視覺對(duì)齊。
在網(wǎng)格布局中，內(nèi)容必須放在列中，并且只有列可以是行的直接子節(jié)點(diǎn)。
感謝 flexbox，沒有指定的網(wǎng)格列
width會(huì)自動(dòng)布局為等寬列。例如，四個(gè).col-sm意志的實(shí)例每個(gè)都會(huì)自動(dòng)從小斷點(diǎn)開始增加25％。有關(guān)更多示例，請(qǐng)參閱自動(dòng)布局列部分。
列類指出了每列中可能使用12列的列數(shù)。所以，如果你想要三個(gè)等寬的列，你可以使用
.col-4。
列
width以百分比形式設(shè)置，因此它們始終是流暢的，并且相對(duì)于其父元素的大小。
列具有水平線
padding以創(chuàng)建單個(gè)列之間的排水溝，但是，您可以使用列.row上的margin行和padding列刪除.no-gutters列。
為了使網(wǎng)格響應(yīng)，有五個(gè)網(wǎng)格斷點(diǎn)，每個(gè)響應(yīng)斷點(diǎn)一個(gè)：所有斷點(diǎn)（特別?。?，小，中，大和特大。
網(wǎng)格斷點(diǎn)基于最小寬度的媒體查詢，這意味著它們適用于那一個(gè)斷點(diǎn)以及它上面的所有斷點(diǎn)（例如，
.col-sm-4適用于小型，中型，大型和超大型設(shè)備，但不適用于第一個(gè)xs斷點(diǎn)）。
您可以使用預(yù)定義的網(wǎng)格類（如
.col-4）或 Sass mixins 來獲得更多語義標(biāo)記。
注意 flexbox 的局限性和錯(cuò)誤，就像無法將一些 HTML 元素用作 flex 容器一樣。
Grid 選項(xiàng)
Bootstrap 使用ems或rems來定義大多數(shù)尺寸，而px用于網(wǎng)格斷點(diǎn)和容器寬度。這是因?yàn)橐暱趯挾仁且韵袼貫閱挝坏模⑶也浑S字體大小而改變。
請(qǐng)參閱引導(dǎo)網(wǎng)格系統(tǒng)的各個(gè)方面是如何在多個(gè)設(shè)備之間使用方便的表工作的。
Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | |
|---|---|---|---|---|---|
Max container width | None (auto) | 540px | 720px | 960px | 1140px |
Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
of columns | 12 | ||||
Gutter width | 30px (15px on each side of a column) | ||||
Nestable | Yes | ||||
Column ordering | Yes |
自動(dòng)布局列
利用特定于斷點(diǎn)的列類進(jìn)行簡單的列調(diào)整，而不使用顯式編號(hào)類，例如.col-sm-6...
Equal-width
例如，下面是適用于所有的設(shè)備和視口，從兩個(gè)網(wǎng)格布局xs來xl。為您需要的每個(gè)斷點(diǎn)添加任意數(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>
等寬列可以分成多行，但存在一個(gè) Safari flexbox 缺陷，如果沒有明確的flex-basis或無效的行為，border就可能無法工作。
有兩種解決方案已在 Bootstrap 外簡化測試用例不過，如果瀏覽器是最新的，這就不應(yīng)該是必要的。
<div class="container"> <div class="row"> <div class="col">Column</div> <div class="col">Column</div> <div class="w-100"></div> <div class="col">Column</div> <div class="col">Column</div> </div></div>
設(shè)置一列寬度
Flexbox 網(wǎng)格列的自動(dòng)布局還意味著您可以設(shè)置一列的寬度并讓兄弟列自動(dòng)調(diào)整其大小。您可以使用預(yù)定義的網(wǎng)格類（如下所示），網(wǎng)格混合或內(nèi)聯(lián)寬度。請(qǐng)注意，無論中央列的寬度如何，其他列都將調(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>
等寬多列
通過插入.w-100您希望這些列插入到新行的位置。通過混合.w-100和一些響應(yīng)顯示實(shí)用程序...
<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>
響應(yīng)類
引導(dǎo)程序的網(wǎng)格包括五個(gè)預(yù)定義類，用于構(gòu)建復(fù)雜的響應(yīng)性布局。在您認(rèn)為合適的額外小、小、中、大或超大設(shè)備上自定義列的大小。
所有斷點(diǎn)
對(duì)于從最小設(shè)備到最大網(wǎng)格相同的網(wǎng)格，請(qǐng)使用.col和.col-*上課。當(dāng)您需要一個(gè)特別大小的列時(shí)，指定一個(gè)編號(hào)的類；否則，可以繼續(xù)使用.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-*類，您可以創(chuàng)建一個(gè)基本的網(wǎng)格系統(tǒng)，該系統(tǒng)在桌面（中型）設(shè)備上變?yōu)樗街?，先堆疊在額外的小型設(shè)備上。
<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>
混合與匹配
不希望您的列簡單地堆疊在某些網(wǎng)格層中？根據(jù)需要，為每一層使用不同類的組合。請(qǐng)參閱下面的示例，以更好地了解它是如何工作的。
<!-- Stack the columns on mobile by making one full-width and the other half-width --><div class="row"> <div class="col-12 col-md-8">.col-12 .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>
對(duì)齊
使用柔性盒對(duì)齊實(shí)用工具對(duì)齊縱橫列。
垂直對(duì)準(zhǔn)
<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"> <div class="col align-self-start"> One of three columns </div> <div class="col align-self-center"> One of three columns </div> <div class="col align-self-end"> One of three columns </div> </div></div>
水平對(duì)準(zhǔn)
<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>
沒有 gutters
我們預(yù)定義的網(wǎng)格類中的列之間的排水溝可以使用.no-gutters。這消除了負(fù)margin從s .row和水平padding從所有直接子列。
以下是創(chuàng)建這些樣式的源代碼。請(qǐng)注意，列重寫僅限于第一個(gè)子列，并且通過屬性選擇器進(jìn)行定位。雖然這會(huì)生成更具體的選擇器，但列填充仍可以使用間隔實(shí)用程序進(jìn)一步定制。
需要邊緣到邊緣的設(shè)計(jì)？放棄父類.container或.container-fluid。
.no-gutters {
margin-right: 0;
margin-left: 0; > .col, > [class*="col-"] {
padding-right: 0;
padding-left: 0; }}實(shí)際上，這是它的外觀。請(qǐng)注意，您可以繼續(xù)將其與所有其他預(yù)定義的網(wǎng)格類（包括列寬，響應(yīng)層，重新排序等）一起使用。
<div class="row no-gutters"> <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div></div>
Column wrapping
如果在一行中放置了12列以上，則每組額外的列作為一個(gè)單元，將換到新行上。
<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>
Column breaks
在 flexbox 中將一列新行切分為新行需要小小的破解：width: 100%在要將列包裝到新行的任何位置添加元素。通常這是用多個(gè).row來實(shí)現(xiàn)的，但是從來沒有實(shí)現(xiàn)方法可以解釋這一點(diǎn)。
<div class="row"> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <!-- Force next columns to break to new line --> <div class="w-100"></div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div></div>
您也可以在特定的斷點(diǎn)上應(yīng)用此中斷。響應(yīng)顯示實(shí)用程序。
<div class="row"> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</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-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div></div>
重排
Order 類
使用.order-類來控制內(nèi)容的視覺順序。這些類是響應(yīng)式的，所以你可以通過設(shè)置order斷點(diǎn)（例如，.order-1.order-md-2）。包括1通過12所有五個(gè)網(wǎng)格層的支持。
<div class="container"> <div class="row"> <div class="col"> First, but unordered </div> <div class="col order-12"> Second, but last </div> <div class="col order-1"> Third, but first </div> </div></div>
還有一個(gè)響應(yīng)式.order-first類，可以通過應(yīng)用快速更改一個(gè)元素的順序order: -1。這個(gè)類也可以.order-*根據(jù)需要與編號(hào)的類混合使用。
<div class="container"> <div class="row"> <div class="col"> First, but unordered </div> <div class="col"> Second, but unordered </div> <div class="col order-first"> Third, but first </div> </div></div>
偏移列
您可以通過兩種方式抵消網(wǎng)格列：我們的響應(yīng).offset-網(wǎng)格類和我們的保證金實(shí)用程序。網(wǎng)格類的大小與列匹配，而邊距對(duì)于偏移量寬度可變的快速布局更有用。
偏移類
使用.offset-md-*類將列向右移動(dòng)。這些類按*列增加列的左邊距。例如，.offset-md-4移動(dòng).col-md-4四列。
<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>
除了響應(yīng)斷點(diǎn)處的列清除外，您可能還需要重置偏移量。在網(wǎng)格示例中查看此操作。
<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.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>
Margin utilities
隨著在第4版中轉(zhuǎn)向 flexbox，您可以使用保證金工具.mr-auto來強(qiáng)制兄弟列彼此遠(yuǎn)離。
<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>
Nesting
嵌套使用默認(rèn)網(wǎng)格您的內(nèi)容，添加新的.row和一組.col-sm-*列現(xiàn)有的內(nèi).col-sm-*柱。嵌套行應(yīng)包含一組最多不超過12個(gè)的列（不要求您使用全部12個(gè)可用列）。
<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 mixins
使用 Bootstrap 的源 Sass 文件時(shí)，您可以選擇使用 Sass 變量和 mixin 來創(chuàng)建自定義，語義和響應(yīng)式頁面布局。我們預(yù)定義的網(wǎng)格類使用這些相同的變量和 mixins 來為快速響應(yīng)的布局提供一整套隨時(shí)可用的類。
變量
變量和地圖確定列的數(shù)量，gutter 寬度和開始浮動(dòng)列的媒體查詢點(diǎn)。我們使用這些來生成上面記錄的預(yù)定義網(wǎng)格類，以及下面列出的自定義混合類。
$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);
Mixins
Mixins 與網(wǎng)格變量一起使用，為單個(gè)網(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 及其默認(rèn)值。下面是一個(gè)使用默認(rèn)設(shè)置創(chuàng)建兩列布局的示例。
.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">Main content</div> <div class="example-content-secondary">Secondary content</div> </div></div>
定制網(wǎng)格
使用內(nèi)置的網(wǎng)格 Sass 變量和映射，完全可以定制預(yù)定義的網(wǎng)格類。更改層數(shù)、媒體查詢維度和容器寬度-然后重新編譯。
Columns 和 gutters
網(wǎng)格列的數(shù)量可以通過 Sass 變量修改。$grid-columns用于產(chǎn)生每個(gè)單獨(dú)的列的寬度（以百分?jǐn)?shù)表示），同時(shí)$grid-gutter-width允許斷點(diǎn)特定寬度在跨越均勻劃分padding-left并padding-right為列水槽。
$grid-columns: 12 !default;$grid-gutter-width: 30px !default;
Grid tiers
除了列本身之外，還可以自定義網(wǎng)格層的數(shù)量。如果只需要四個(gè)網(wǎng)格層，則需要更新$grid-breakpoints和$container-max-widths像這樣的事情：
$grid-breakpoints: ( xs: 0, sm: 480px, md: 768px, lg: 1024px);$container-max-widths: ( sm: 420px, md: 720px, lg: 960px);
在對(duì) Sass 變量或映射進(jìn)行任何更改時(shí)，您需要保存更改并重新編譯。這樣做會(huì)輸出一組全新的預(yù)定義網(wǎng)格類，用于列寬，偏移和排序。響應(yīng)可見性實(shí)用程序也將更新為使用自定義斷點(diǎn)。確保在設(shè)置網(wǎng)格值px（不是rem，em或%）。