View on GitHub

網格系統 (Grid system)

使用我們強大、行動優先的 flexbox 網格來建立符合各種尺寸的網頁排版，包含十二欄系統、六個預設的響應式斷點、Sass 變數和 mixins，以及很多預定義的類別。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

On this page

範例

Bootstrap 的網格系統使用一系列容器、行、和欄進行排版和對齊內容。它用 flexbox 建立，並且完全符合響應式。下面是網格系統如何整合的例子及深入瞭解。

還不熟悉 Flex 嗎？閱讀此份 Flex 指引，關於背景、術語、指引、程式碼片段。

Column

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

上面的範例中，我們使用了預定義的網格 class 在所有設備中建立了三個等寬度的欄。通過父類 .container 使這些欄位於頁面中心。

如何運作

分解一下，這個網格系統是如何組合在一起並運作的方式：

我們的網格系統支援六個響應式斷點。 斷點主要是基於 min-width 來設置 media queries, 這代表著它們將會影響該斷點及其上的所有斷點（例如，.col-sm-4 適用於sm，md，lg，xl 和 xxl）。這也意味著您可以通過每個斷點控制容器和欄的大小以及行為。
容器水平居中並填滿內容。 使用 .container 作為響應式的固定寬度, .container-fluid 的寬度在所有的設備上均為 width: 100%, 而響應式容器 (例如. .container-md) 主要用於搭配流體容器以及固定寬度容器的組合。
Rows 與 Columns 的組合。 每個欄位之間的水平 padding (稱為 gutter)是用來控制兩者之間的間距。然後在每個列上加上負值抵消這個 padding，以確保每一列中的內容在視覺上沿左側向下對齊。每一行也支持使用修飾符 class，以統一行與欄的大小和 Gutters 來更改內容的間距。
欄的靈活性非常高。 每一行總共有 12 欄，你可以建立一個任意跨越欄的組合。 Column 代表著要跨越的欄數 (例如：col-4 跨越四欄)。 width 將會以百分比作為基準，因此可以確保尺寸的正常.
Gutters 可以響應式也可以自定義 。Gutter 類別可用於任何斷點，其大小會與 margin 和 padding 的間隔相同. 使用 .gx-* 類別來更改水平方向的 Gutters、用 .gy-* 更改垂直方向的 Gutters，或是用 .g-* 更改所有方向的 Gutters。也可以使用 .g-0 來移除所有 Gutters。
主要是透過 Sass 變數, maps, 與 mixins 來達到網格系統 如果您不想在 Bootstrap 中使用預先定義好的網格，那麼你可以考慮使用 Grid Sass 原始碼建立更多客製化的網格系統。我們也包含一些 CSS 自定義屬性，使用這些 Sass 變數，就可以為你提供更大的靈活性。

請多加注意一些問題以及 flexbox 上常見的錯誤,例如無法使用某些 HTML 元素作為 Flex 容器使用。

網格選項

Bootstrap 的網格系統預設會自動適應六個斷點以及您自定義的任何斷點。而這六個斷點如下：

極小 (xs)
小 (sm)
中 (md)
大 (lg)
特大 (xl)
超級大 (xxl)

如上述所述, 每一個斷點都有屬於自己的容器空間，主要是透過以下 class 操作。以下是這些網格在特定斷點的變化:

	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

自動排版的欄

使用特定中斷點欄類方便的確定欄的大小，而不是明確的寬度 class，例如 .col-sm-6。

等寬

例如，有兩個網格排版適用於每個裝置和 viewport，從 xs 到 xl。對每一個你需要的中斷點增加無單位的 class，每一欄將具有相同的寬度。

1 of 2

2 of 2

1 of 3

2 of 3

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

設置一欄寬度

flexbox 網格欄的自動排版中你可以設置欄的寬度，並且其左右欄將在其周圍自動調整大小。你也可以使用預定義的網格 Class (如下所示)、Grid mixins、或行內寬度。請注意，無論中間欄的寬度，其它欄都將重新調整大小。

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

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

Variable width content

3 of 3

1 of 3

Variable width content

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

響應式 Classes

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>

混合和匹配

不想讓你的欄堆疊在某些網格階層上？依需求使用每一層不同的 class 組合。對於它如何運作，請見下面的例子。

.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-cols-* 的 class 可以快速設置並呈現您想要內容與排版的列數。普通的 .col-* 適用於各個列（例如 .col-md-4 ），而行列類是在父層 .row 上設置。使用方式是 .row-cols-auto，您可以為列指定成彈性寬度。

使用這些行列類可以快速創建基本的網格排版或控制您的卡片排版。

Column

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

Column

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

Column

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

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

Column

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

Column

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

You can also use the accompanying 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);
  }
}

巢狀

為了將你的內容加入巢狀網格，在現有的 .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

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

Sass

當使用 Bootstrap Sass 檔時，你可以選擇使用 Sass 變數和 mixins 客製化、語義、和控制頁面配置。我們預定義的網格類別使用這些相同的變數和 mixins 提供整套隨時可用的 class 用於響應式排版。

變數

變數和 sass map 決定了欄的數量、gutter 的寬度、和開始浮動欄的中斷點。我們使用它們產生上文記錄的定義網格 class ，以及用於下列的客製 mixins 類型。

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

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

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

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

<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 maps，可以完全的客製網格的 class。改變層的數量，media query 的參數和容器寬度然後重新編譯。

欄與 gutters

通過 Sass 變數可以修改欄位數和它們的水平 padding 的數量（又稱為 gutters）。$grid-columns 用於產生每一個單獨欄的寬度（百分比），而 $grid-gutter-width 用於設定 gutters 的寬度。

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

Grid 階層

欄本身之外，你也可以自定義網格層的數量。如果你只想要四個網格層，你應當按照下文更新 $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 變數或 sass map 做出任何改動時，你必須保存你的改動並重新編譯。這樣做將對欄寬度、排序、位移、及輸出新的一組網格 class。還將更新響應式元件及中斷點。確保在 px（不是 rem、em 或 %）中設置格線數值。