?
This document uses PHP Chinese website manual Release
布局您的 Bootstrap 項目的組件和選項,包括包裝容器、強大的網(wǎng)格系統(tǒng)、靈活的媒體對象和響應(yīng)性實用工具類。
容器是 Bootstrap 中最基本的布局元素,在使用我們的默認(rèn)網(wǎng)格系統(tǒng)時是必需的。選擇響應(yīng)式固定寬度的容器(意味著它max-width
在每個斷點處的變化)或流體寬度(意味著它100%
始終是寬的)。
雖然容器可以嵌套,但大多數(shù)布局不需要嵌套容器。
<div class="container"> <!-- Content here --></div>
利用特定于斷點的列類進(jìn)行簡單的列調(diào)整,而不使用顯式編號類,例如.col-sm-6
...
<div class="container-fluid"> ...</div>
由于 Bootstrap 是首先開發(fā)為可移動的,所以我們使用了以下幾個媒體查詢?yōu)槲覀兊牟季趾徒涌趧?chuàng)建合理的斷點。這些斷點主要基于最小視口寬度,允許我們隨著視口的變化而擴展元素。
等寬列可以分成多行,但存在一個 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>
Flexbox 網(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>
使用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)顯示實用程序...
<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>
引導(dǎo)程序的網(wǎng)格包括五個預(yù)定義類,用于構(gòu)建復(fù)雜的響應(yīng)性布局。在您認(rèn)為合適的額外小、小、中、大或超大設(shè)備上自定義列的大小。