網格系統

使用我們強大的移動優先 flexbox 網格來構建各種形狀和大小的佈局，這要歸功於 12 列系統、6 個默認響應層、Sass 變量和 mixin 以及數十個預定義類。

在本頁面

例子

Bootstrap 的網格系統使用一系列容器、行和列來佈局和對齊內容。它是用flexbox構建的，並且是完全響應的。以下是網格系統如何組合在一起的示例和深入解釋。

剛接觸或不熟悉 flexbox？ 閱讀此 CSS 技巧 flexbox 指南，了解背景、術語、指南和代碼片段。

柱子

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。

這個怎麼運作

分解它，這是網格系統如何組合在一起的：

我們的網格支持六個響應式斷點。斷點基於min-width媒體查詢，這意味著它們會影響該斷點及其上方的所有斷點（例如，.col-sm-4適用於sm、md、lg、xl和xxl）。這意味著您可以通過每個斷點控制容器和列的大小和行為。
容器居中並水平填充您的內容。用於跨所有視口和設備.container的響應式像素寬度，或.container-fluid用於流體和像素寬度組合的width: 100%響應式容器（例如.container-md）。
行是列的包裝器。每列都有水平padding的（稱為排水溝），用於控制它們之間的空間。然後在具有負邊距的行上抵消這padding一點，以確保列中的內容在視覺上與左側對齊。行還支持修飾符類以統一應用列大小和裝訂線類來更改內容的間距。
列非常靈活。每行有 12 個模板列，允許您創建跨越任意數量列的不同元素組合。列類指示要跨越的模板列的數量（例如，col-4跨越四個）。widths 以百分比設置，因此您始終具有相同的相對大小。
排水溝也具有響應性和可定制性。 Gutter 類可用於所有斷點，大小與我們的margin 和 padding 間距相同。使用類更改水平裝訂線，使用更改.gx-*垂直裝訂線.gy-*，或使用類更改所有裝訂線.g-*。.g-0也可用於去除排水溝。
Sass 變量、映射和混合為網格提供動力。如果您不想在 Bootstrap 中使用預定義的網格類，您可以使用我們網格的源 Sass來創建您自己的具有更多語義標記的網格。我們還包括一些 CSS 自定義屬性來使用這些 Sass 變量，從而為您提供更大的靈活性。

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

網格選項

Bootstrap 的網格系統可以適應所有六個默認斷點以及您自定義的任何斷點。六個默認網格層如下：

超小號 (xs)
小（平方米）
中 (md)
大 (lg)
特大號 (xl)
特大號 (xxl)

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

	xs <576 像素	sm≥576px _	md≥768px _	lg≥992px _	xl≥1200px _	xxl ≥1400px
容器`max-width`	無（自動）	540像素	720像素	960像素	1140像素	1320像素
類前綴	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# 列數	12
天溝寬度	1.5rem（左右0.75rem）
自定義排水溝	是的
可嵌套	是的
列排序	是的

自動佈局列

利用特定於斷點的列類來輕鬆調整列大小，而無需像.col-sm-6.

等寬

例如，這裡有兩個網格佈局適用於每個設備和視口，從xs到xxl. 為您需要的每個斷點添加任意數量的無單位類，並且每列的寬度都相同。

1 的 2

2 個，共 2 個

1 個，共 3 個

2 個，共 3 個

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

設置一列寬

flexbox 網格列的自動佈局還意味著您可以設置一列的寬度並讓同級列自動調整其大小。您可以使用預定義的網格類（如下所示）、網格混合或內聯寬度。請注意，無論中心列的寬度如何，其他列都會調整大小。

1 個，共 3 個

3 個中的 2 個（更寬）

3 之 3

1 個，共 3 個

3 個中的 2 個（更寬）

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

可變寬度內容

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

1 個，共 3 個

可變寬度內容

3 之 3

1 個，共 3 個

可變寬度內容

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

響應類

Bootstrap 的網格包括六層預定義類，用於構建複雜的響應式佈局。在您認為合適的超小型、小型、中型、大型或超大型設備上自定義列的大小。

所有斷點

對於從最小設備到最大設備都相同的網格，請使用.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>

堆疊成水平

使用一組.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>

連連看

不希望您的列簡單地堆疊在某些網格層中？根據需要為每一層使用不同類的組合。請參閱下面的示例，以更好地了解它是如何工作的。

.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-cols-*式類快速設置最能呈現您的內容和佈局的列數。普通.col-*類適用於單個列（例如.col-md-4），而行列類.row作為快捷方式設置在父級上。有了.row-cols-auto你，你可以給列它們的自然寬度。

使用這些行列類快速創建基本的網格佈局或控制您的卡片佈局。

柱子

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>

柱子

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>

柱子

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>

柱子

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>

柱子

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>

柱子

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

嵌套

要使用默認網格嵌套您的內容，請在現有列中添加一.row組新列。嵌套行應包括一組不超過 12 列的列（不需要使用所有 12 個可用列）。.col-sm-*.col-sm-*

級別 1：.col-sm-3

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

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>

薩斯

使用 Bootstrap 的 Sass 源文件時，您可以選擇使用 Sass 變量和 mixin 來創建自定義、語義和響應式頁面佈局。我們預定義的網格類使用這些相同的變量和 mixin 來提供一整套現成的類，以實現快速響應的佈局。

變量

變量和映射確定列數、裝訂線寬度和開始浮動列的媒體查詢點。我們使用這些來生成上面記錄的預定義網格類，以及下面列出的自定義 mixins。

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

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

混合

Mixin 與網格變量結合使用，為各個網格列生成語義 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);

示例用法

您可以將變量修改為您自己的自定義值，或者僅使用帶有默認值的 mixin。這是一個使用默認設置創建兩列佈局的示例，其間有間隙。

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

主要內容

次要內容

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>

自定義網格

使用我們內置的網格 Sass 變量和映射，可以完全自定義預定義的網格類。更改層數、媒體查詢維度和容器寬度，然後重新編譯。

列和排水溝

網格列的數量可以通過 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-breakpointsand更新為$container-max-widths如下內容：

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

在對 Sass 變量或映射進行任何更改時，您需要保存更改並重新編譯。這樣做將輸出一組全新的預定義網格類，用於列寬、偏移和排序。響應式可見性實用程序也將更新為使用自定義斷點。確保在px(not rem, em, or %) 中設置網格值。