格線系統（Grid system）

使用我們強大的行動優先 Flexbox 格線來建立各種形狀和大小的版面配置，這要歸功於十二欄系統、六個預設響應式層級、Sass 變數和 mixins，以及數十個預先定義的類別。

本頁內容

範例（Example）

Bootstrap 的格線系統使用一系列容器、列和欄來配置和對齊內容。它使用 flexbox 建構，並且完全響應式。以下是一個範例和格線系統如何組合在一起的深入說明。

剛接觸或不熟悉 flexbox？ 閱讀這份 CSS Tricks 的 flexbox 指南以了解背景、術語、指導方針和程式碼片段。

Column

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

上面的範例使用我們預先定義的格線類別，在所有裝置和視窗中建立三個等寬欄。這些欄透過父層 .container 在頁面中置中。

運作原理（How it works）

分解來看，以下是格線系統如何組合在一起：

我們的格線支援六個響應式中斷點。 中斷點基於 min-width 媒體查詢，這意味著它們會影響該中斷點及其上的所有中斷點（例如，.col-sm-4 適用於 sm、md、lg、xl 和 xxl）。這表示您可以在每個中斷點控制容器和欄的大小和行為。
容器置中並水平填充您的內容。 使用 .container 獲得響應式像素寬度，使用 .container-fluid 在所有視窗和裝置上獲得 width: 100%，或使用響應式容器（例如 .container-md）組合流動和像素寬度。
列是欄的包裝器。 每個欄都有水平 padding（稱為間隔）來控制它們之間的空間。然後在列上使用負外距來抵消這個 padding，以確保欄中的內容在左側視覺對齊。列還支援修飾類別來統一套用欄大小和間隔類別來更改內容的間距。
欄非常靈活。 每列有 12 個範本欄可用，讓您可以建立跨越任意數量欄的不同元素組合。欄類別指示要跨越的範本欄數（例如，col-4 跨越四欄）。width 以百分比設定，因此您始終具有相同的相對大小。
間隔也是響應式且可自訂的。 間隔類別可用於所有中斷點，具有與我們的外距和內距間距相同的所有尺寸。使用 .gx-* 類別更改水平間隔，使用 .gy-* 更改垂直間隔，或使用 .g-* 類別更改所有間隔。.g-0 也可用於移除間隔。
Sass 變數、maps 和 mixins 驅動格線。 如果您不想使用 Bootstrap 中預先定義的格線類別，可以使用我們的格線原始碼 Sass 來建立具有更多語意標記的自訂格線。我們還包含一些 CSS 自訂屬性來使用這些 Sass 變數，為您提供更大的靈活性。

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

格線選項（Grid options）

Bootstrap 的格線系統可以適應所有六個預設中斷點，以及您自訂的任何中斷點。六個預設格線層級如下：

Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (xxl)

如上所述，這些中斷點中的每一個都有自己的容器、唯一的類別前綴和修飾詞。以下是格線在這些中斷點之間的變化：

	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

自動版面配置欄（Auto-layout columns）

使用特定中斷點的欄類別輕鬆調整欄大小，無需明確的編號類別如 .col-sm-6。

等寬（Equal-width）

例如，這裡有兩個格線版面配置，適用於從 xs 到 xxl 的每個裝置和視窗。為您需要的每個中斷點加入任意數量的無單位類別，每個欄將具有相同的寬度。

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

html

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

設定單一欄寬（Setting one column width）

Flexbox 格線欄的自動版面配置也意味著您可以設定一個欄的寬度，讓同層欄自動調整大小。您可以使用預先定義的格線類別（如下所示）、格線 mixins 或行內寬度。請注意，無論中間欄的寬度如何，其他欄都會調整大小。

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

html

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

可變寬度內容（Variable width content）

使用 col-{breakpoint}-auto 類別根據內容的自然寬度來調整欄的大小。

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

html

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

響應式類別（Responsive classes）

Bootstrap 的格線包含六個層級的預先定義類別，用於建立複雜的響應式版面配置。根據您的需要在超小、小、中、大或超大裝置上自訂欄的大小。

所有中斷點（All breakpoints）

對於從最小到最大裝置都相同的格線，使用 .col 和 .col-* 類別。當您需要特定大小的欄時指定編號類別；否則，請隨意使用 .col。

col

col-8

col-4

html

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

堆疊到水平（Stacked to horizontal）

使用一組 .col-sm-* 類別，您可以建立一個基本的格線系統，該系統一開始是堆疊的，然後在小中斷點（sm）變成水平的。

col-sm-8

col-sm-4

col-sm

html

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

混合搭配（Mix and match）

不想讓您的欄在某些格線層級中只是簡單堆疊？根據需要為每個層級使用不同類別的組合。請參閱下面的範例以更好地了解它是如何運作的。

.col-md-8

.col-6 .col-md-4

.col-6

html

<div class="container text-center">
  <!-- 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 columns）

使用響應式 .row-cols-* 類別快速設定最能呈現您的內容和版面配置的欄數。普通的 .col-* 類別適用於個別欄（例如 .col-md-4），而列欄類別作為捷徑設定在父層 .row 上。使用 .row-cols-auto 可以讓欄保持其自然寬度。

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

Column

html

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

Column

html

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

Column

html

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

Column

html

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

Column

html

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

Column

html

<div class="container text-center">
  <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 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);
  }
}

巢狀（Nesting）

要使用預設格線巢狀您的內容，請在現有的 .col-sm-* 欄內加入新的 .row 和一組 .col-sm-* 欄。巢狀列應包含總和為 12 或更少的一組欄（不需要使用所有 12 個可用欄）。

Level 1: .col-sm-3

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

html

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

CSS

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

Sass 變數（Sass variables）

變數和 maps 決定欄數、間隔寬度，以及開始浮動欄的媒體查詢點。我們使用這些來生成上面記錄的預先定義格線類別，以及下面列出的自訂 mixins。

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

scss/_variables.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

scss/_variables.scss

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sass mixins

Mixins 與格線變數結合使用，為個別格線欄生成語意化 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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

使用範例（Example usage）

您可以將變數修改為您自己的自訂值，或只使用具有預設值的 mixins。以下是使用預設設定建立帶有間隔的兩欄版面配置的範例。

.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);
  }
}

Main content

Secondary content

html

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

自訂格線（Customizing the grid）

使用我們內建的格線 Sass 變數和 maps，可以完全自訂預先定義的格線類別。更改層級數量、媒體查詢尺寸和容器寬度——然後重新編譯。

欄和間隔（Columns and gutters）

可以透過 Sass 變數修改格線欄數。$grid-columns 用於生成每個個別欄的寬度（以百分比表示），而 $grid-gutter-width 設定欄間隔的寬度。$grid-row-columns 用於設定 .row-cols-* 的最大欄數，超過此限制的任何數字都會被忽略。

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

格線層級（Grid tiers）

除了欄本身之外，您也可以自訂格線層級的數量。如果您只想要四個格線層級，您可以將 $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 變數或 maps 進行任何更改時，您需要儲存更改並重新編譯。這樣做將輸出一組全新的預先定義格線類別，用於欄寬、偏移和排序。響應式可見性通用類別也將更新以使用自訂中斷點。請確保以 px（而非 rem、em 或 %）設定格線值。