網格系統

使用我們強大的行動優先 flexbox 網格，建構各種形狀和大小的版面配置，這要歸功於十二欄系統、五個預設的回應式層級、Sass 變數和混入，以及數十個預先定義的類別。

運作方式

Bootstrap 的網格系統使用一系列容器、列和欄，來配置和對齊內容。它是使用 flexbox 建構的，且完全具備回應式。以下是範例和深入探討網格如何結合在一起。

對 flexbox 很陌生或不熟悉嗎？ 閱讀這篇 CSS Tricks flexbox 指南，瞭解背景、術語、指南和程式碼片段。

三欄之一

<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 置中於頁面。

分解說明，以下是運作方式

容器提供一種方式，讓您網站的內容置中並水平內嵌。使用 .container 進行回應式像素寬度，或使用 .container-fluid 進行 width: 100%，適用於所有視窗和裝置大小。
列是欄位的包裝器。每個欄位都有水平 padding（稱為間距），用於控制欄位之間的空間。然後，此 padding 會在列中使用負邊界抵銷。這樣一來，您欄位中的所有內容都會在左側視覺對齊。
在網格配置中，內容必須置於欄位內，且只有欄位可以是列的直接子層。
由於彈性盒狀模型，未指定 width 的網格欄位將自動配置為等寬欄位。例如，四個 .col-sm 實例將自動從小型中斷點開始，每個寬度為 25%。請參閱自動配置欄位區段，以取得更多範例。
欄位類別表示您想使用每列 12 個欄位中可能的數量。因此，如果您想要三個等寬欄位，可以使用 .col-4。
欄位 width 以百分比設定，因此它們始終是流動的，且大小相對於其父層元素。
欄位有水平 padding，用於建立個別欄位之間的間距，不過，您可以使用 .row 上的 .no-gutters，移除列的 margin 和欄位的 padding。
為了讓網格具有回應性，有五個網格中斷點，每個中斷點都有一個回應式中斷點：所有中斷點（超小型）、小型、中型、大型和超大型。
網格中斷點基於最小寬度媒體查詢，表示它們套用於該中斷點和所有較大中斷點（例如，.col-sm-4 套用於小型、中型、大型和超大型裝置，但不套用於第一個 xs 中斷點）。
您可以使用預先定義的網格類別（例如 .col-4）或 Sass 混合，以取得更具語意的標記。

請注意 flexbox 的限制和錯誤，例如無法將某些 HTML 元素用作 flex 容器。

網格選項

雖然 Bootstrap 使用 em 或 rem 定義大部分大小，但 px 用於網格斷點和容器寬度。這是因為視窗寬度以像素為單位，且不會隨字體大小而改變。

透過一個方便的表格，瞭解 Bootstrap 網格系統的各個面向如何在多個裝置上運作。

	特小 <576px	小 ≥576px	中 ≥768px	大 ≥992px	特大 ≥1200px
最大容器寬度	無 (自動)	540px	720px	960px	1140px
類別字首	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
欄位數	12
間距寬度	30px (欄位兩側各 15px)
可巢狀	是
欄位順序	是

自動版面配置欄

使用特定於斷點的欄位類別，即可輕鬆調整欄位大小，而不需要明確的編號類別，例如 .col-sm-6。

等寬

例如，以下兩個網格版面適用於從 xs 到 xl 的每個裝置和視窗。針對每個需要的斷點新增任意數量的無單位類別，每個欄位都將具有相同的寬度。

1/2

2/2

1/3

2/3

3/3

<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>

等寬多行

透過在希望欄位換行的位置插入 .w-100，建立跨越多行的等寬欄位。將 .w-100 與一些響應式顯示工具程式混合，讓換行具有響應性。

有一個 Safari flexbox 錯誤，導致無法在沒有明確的 flex-basis 或 border 的情況下執行此操作。針對較舊的瀏覽器版本有解決方法，但如果目標瀏覽器沒有出現在有錯誤的版本中，則不需要這些解決方法。

col

<div class="container">
  <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>
</div>

設定一個欄寬

flexbox 網格欄位的自動版面配置也表示您可以設定一個欄位的寬度，並讓兄弟欄位自動調整其大小。您可以使用預先定義的網格類別 (如下所示)、網格混合或內嵌寬度。請注意，其他欄位將會調整大小，無論中央欄位的寬度為何。

1/3

2/3 (較寬)

3/3

1/3

2/3 (較寬)

3/3

<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 類別，根據內容的自然寬度調整欄位大小。

1/3

變寬內容

3/3

1/3

變寬內容

3/3

<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-* 類別。當您需要特定大小的欄時，請指定一個編號類別；否則，請隨時堅持使用 .col。

col

col-8

col-4

<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) 處變成水平。

col-sm-8

col-sm-4

col-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>

混合搭配

不希望您的欄在某些格線層中僅堆疊嗎？視需要為每個層使用不同類別的組合。請參閱以下範例，以更深入了解其運作方式。

.col-md-8

.col-6 .col-md-4

.col-6

<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 上配對一個負邊距工具程式，並在 .col 上配對內距工具程式。.container 或 .container-fluid 父層可能也需要調整，以避免不必要的溢位，再次使用配對內距工具程式。

以下是自大型 (lg) 斷點及以上自訂 Bootstrap 格線的範例。我們已使用 .px-lg-5 增加 .col 內距，並在父層 .row 上使用 .mx-lg-n5 來抵消它，然後使用 .px-lg-5 調整 .container 包裹器。

自訂欄內距

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

列欄

使用回應式 .row-cols-* 類別來快速設定最能呈現您的內容和版面的欄數。雖然一般的 .col-* 類別套用於個別欄 (例如，.col-md-4)，但列欄類別會設定在父層 .row 上作為捷徑。

使用這些列欄類別來快速建立基本的格線版面或控制您的卡片版面。

欄

<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-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>

您也可以使用隨附的 Sass 混入 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);
  }
}

對齊

使用彈性盒對齊工具程式來垂直和水平對齊欄。當彈性容器具有 min-height 時，Internet Explorer 10-11 不支援彈性項目垂直對齊，如下所示。 請參閱 Flexbug #3 以取得更多詳細資訊。

垂直對齊

三欄之一

<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>

水平對齊

兩欄之一

<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>

無間距

可以使用 .no-gutters 來移除我們預先定義的格線類別中欄之間的欄間距。這會移除 .row 中的負 margin 和所有直接子欄中的水平 padding。

以下是建立這些樣式的原始碼。請注意，欄位覆寫僅限於第一個子欄位，並透過屬性選擇器為目標。雖然這會產生更具體的選擇器，但欄位內距仍可進一步透過間距工具自訂。

需要邊緣對齊設計嗎？ 捨棄父層 .container 或 .container-fluid。

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

實際上，它看起來就像這樣。請注意，您可以繼續將它與所有其他預定義的格線類別一起使用（包括欄位寬度、回應層級、重新排序等）。

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

欄位換行

如果在單一行中放置超過 12 個欄位，每一組額外的欄位將會作為一個單元換行到新的一行。

.col-9

.col-4
由於 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 &gt; 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

<div class="container">
  <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

<div class="container">
  <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 到 12 的支援。

在 DOM 中第一個，未套用順序

在 DOM 中第二個，順序較大

在 DOM 中第三個，順序為 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      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: 13（order: $columns + 1）來變更元素的 order。這些類別也可以視需要與編號的 .order-* 類別混合使用。

在 DOM 中第一個，順序最後

在 DOM 中第二個，未排序

在 DOM 中第三個，順序第一

<div class="container">
  <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-6 .offset-md-3

<div class="container">
  <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">
  <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 中移至彈性盒狀模型後，您可以使用邊距工具程式，例如 .mr-auto，強制兄弟欄位彼此分開。

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <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>
</div>

巢狀

若要使用預設網格巢狀您的內容，請在現有的 .col-sm-* 欄位中新增一個 .row 和一組 .col-sm-* 欄位。巢狀列應包含一組加起來等於 12 或更少的欄位（您不需要使用所有 12 個可用欄位）。

層級 1：.col-sm-9

層級 2：.col-8 .col-sm-6

層級 2：.col-4 .col-sm-6

<div class="container">
  <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>
</div>

Sass 混入

使用 Bootstrap 的 Sass 原始檔案時，您可以選擇使用 Sass 變數和混合來建立自訂、語意化且回應式的頁面配置。我們預先定義的網格類別使用這些相同的變數和混合，提供一整套可立即使用的類別，以快速建立回應式配置。

變數

變數和對應表決定欄位的數量、間距寬度，以及開始浮動欄位的媒體查詢點。我們使用這些變數和對應表產生上面記錄的預先定義網格類別，以及下面列出的自訂混合。

$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
);

混入

混合與網格變數結合使用，可為個別網格欄位產生語意化 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);

範例用法

您可以將變數修改為您自己的自訂值，或僅使用混合及其預設值。以下是一個使用預設設定建立兩個欄位配置並在中間留有間隙的範例。

.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: 30px !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 或 %）中設定網格值。