欄位
透過我們的彈性盒狀格線系統，了解如何使用少數對齊、排序和偏移選項來修改欄。此外，瞭解如何使用欄位類別來管理非格線元素的寬度。
在此頁面上
請注意！務必先閱讀格線頁面，再深入了解如何修改和自訂格線欄位。
它們如何運作
-
欄位建立在網格的彈性盒架構上。彈性盒表示我們有選項可以變更個別欄位，並修改列層級的欄位群組。您可以選擇欄位如何增長、縮小或其他變更。
-
建立網格配置時，所有內容都會顯示在欄位中。Bootstrap 網格的層級從容器到列再到欄位，最後是您的內容。在少數情況下，您可以結合內容和欄位，但請注意可能會產生意外後果。
-
Bootstrap 包含預先定義的類別，用於建立快速、回應式配置。每個網格層級有六個中斷點和十幾個欄位，我們已經為您建立了數十個類別，以便您建立想要的配置。如果您願意，可以使用 Sass 來停用此功能。
對齊
使用彈性盒對齊工具垂直和水平對齊欄位。
垂直對齊
使用任一回應式 align-items-* 類別變更垂直對齊。
三個欄位之一
三個欄位之一
三個欄位之一
<div class="container text-center">
<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>
三個欄位之一
三個欄位之一
三個欄位之一
<div class="container text-center">
<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>
三個欄位之一
三個欄位之一
三個欄位之一
<div class="container text-center">
<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>或者，使用任一回應式 .align-self-* 類別個別變更每個欄位的對齊。
三個欄位之一
三個欄位之一
三個欄位之一
<div class="container text-center">
<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>水平對齊
使用任一回應式 justify-content-* 類別變更水平對齊。
兩個欄位之一
兩個欄位之一
兩個欄位之一
兩個欄位之一
兩個欄位之一
兩個欄位之一
兩個欄位之一
兩個欄位之一
兩個欄位之一
兩個欄位之一
兩個欄位之一
兩個欄位之一
<div class="container text-center">
<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 class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>欄位換行
如果在單一行中放置超過 12 個欄位，每一組額外的欄位都會作為一個單元換行到新的一行。
.col-9
.col-4
由於 9 + 4 = 13 > 12，因此這個 4 欄寬的 div 會作為一個連續單元換行到新的一行。
由於 9 + 4 = 13 > 12，因此這個 4 欄寬的 div 會作為一個連續單元換行到新的一行。
.col-6
後續欄位會沿著新行繼續。
後續欄位會沿著新行繼續。
<div class="container">
<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>
</div>欄位換行
在彈性盒中將欄位換行到新行需要一個小技巧：在您想要將欄位換行到新行的任何地方，新增一個具有 width: 100% 的元素。通常這會使用多個 .row 來完成，但並非每個實作方法都能考量到這一點。
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
<div class="container text-center">
<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>
</div>您也可以使用我們的 回應式顯示工具 在特定斷點處套用此換行。
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
<div class="container text-center">
<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>
</div>重新排序
排序類別
使用 .order- 類別來控制您內容的視覺順序。這些類別具有回應性，因此您可以按斷點設定 order（例如，.order-1.order-md-2）。包含對所有六個網格層級的 1 到 5 的支援。如果您需要更多 .order-* 類別，您可以透過 Sass 變數修改預設數字。
在 DOM 中第一個，未套用排序
在 DOM 中第二個，具有較大的排序
在 DOM 中第三個，具有排序 1
<div class="container text-center">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>還有回應式的 .order-first 和 .order-last 類別，分別透過套用 order: -1 和 order: 6 來變更元素的 order。這些類別也可以視需要與編號的 .order-* 類別混合使用。
在 DOM 中第一個，排序最後
在 DOM 中第二個，未排序
在 DOM 中第三個，排序第一
<div class="container text-center">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>偏移欄位
您可以使用兩種方式來偏移網格欄位：我們的回應式 .offset- 網格類別和我們的 空白工具。網格類別的尺寸與欄位相符，而空白則對於快速配置欄位寬度變數的配置較為有用。
偏移類別
使用 .offset-md-* 類別將欄位移到右側。這些類別會將欄位的左空白增加 * 欄位。例如，.offset-md-4 會將 .col-md-4 移過四個欄位。
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
<div class="container text-center">
<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>
</div>除了在回應式中斷點清除欄位外，您可能需要重設偏移量。在網格範例中查看實際操作。
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
<div class="container text-center">
<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-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>
</div>邊界公用程式
隨著 v4 轉移到彈性盒狀模型，您可以使用邊界公用程式，例如 .me-auto，來強制兄弟欄位彼此遠離。
.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-auto .me-auto
.col-auto
<div class="container text-center">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>獨立欄位類別
.col-* 類別也可以在 .row 外部使用，以賦予元素特定寬度。每當欄位類別用作一列的非直接子類別時，就會省略內距。
.col-3：寬度為 25%
.col-sm-9：在 sm 中斷點以上寬度為 75%
<div class="col-3 p-3 mb-2">
.col-3: width of 25%
</div>
<div class="col-sm-9 p-3">
.col-sm-9: width of 75% above sm breakpoint
</div>這些類別可以與公用程式一起使用，以建立回應式浮動影像。請務必將內容包覆在 .clearfix 包覆器中，以在文字較短時清除浮動。
一段佔位文字。我們在此使用它來顯示 clearfix 類別的使用方式。我們在此加入許多無意義的短語，以展示欄位如何與浮動影像互動。
如您所見，段落會優雅地環繞浮動影像。現在想像一下，如果這裡有一些實際內容，而不是這段無聊的佔位文字一直持續下去，但實際上並沒有傳達任何具體資訊。它只是佔用空間，實際上不應該被閱讀。
然而，您仍然堅持閱讀這段佔位文字，希望獲得更多見解，或一些隱藏的內容彩蛋。一個笑話，也許。很遺憾，這裡沒有這些。
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>