Skip to main content Skip to docs navigation
View on GitHub

網格系統 (Grid system)

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

範例

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

還不熟悉 Flex 嗎?閱讀此份 Flex 指引 ,關於背景、術語、指引、程式碼片段。
Column
Column
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 適用於smmdlgxlxxl)。 這也意味著您可以通過每個斷點控制容器和欄的大小以及行為。

  • 容器水平居中並填滿內容。 使用 .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,從 xsxl。對每一個你需要的中斷點增加無單位的 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
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
col-sm
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 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.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
Column
Column
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
Column
Column
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
Column
Column
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
Column
Column
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
Column
Column
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
Column
Column
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);

// 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);
  }
}
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(不是 remem%)中設置格線數值。