網格系統

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

這個怎麼運作

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

剛接觸或不熟悉 flexbox？ 閱讀此 CSS 技巧 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然後在具有負邊距的行上抵消這一點。這樣，列中的所有內容在視覺上都在左側對齊。
在網格佈局中，內容必須放在列中，並且只有列可以是行的直接子級。
感謝 flexbox，沒有指定的網格列width將自動佈局為等寬列。例如，四個實例.col-sm將自動從小斷點開始寬 25% 及以上。有關更多示例，請參閱自動佈局列部分。
列類表示每行可能有 12 個列中您希望使用的列數。所以，如果你想要三個等寬的列，你可以使用.col-4.
Columnwidth是按百分比設置的，所以它們總是相對於它們的父元素是流動的和大小的。
列具有水平padding以在各個列之間創建裝訂線，但是，您可以margin從行和padding列.no-gutters中刪除.row.
為了使網格響應，有五個網格斷點，每個響應斷點一個：所有斷點（特小）、小、中、大和特大。
網格斷點基於最小寬度媒體查詢，這意味著它們適用於該斷點及其上方的所有斷點（例如，.col-sm-4適用於小型、中型、大型和超大型設備，但不適用於第一個xs斷點）。
您可以使用預定義的網格類（如.col-4）或Sass mixins來進行更多語義標記。

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

網格選項

Bootstrap 使用ems 或rems 來定義大多數大小，而pxs 用於網格斷點和容器寬度。這是因為視口寬度以像素為單位，不隨字體大小而變化。

通過方便的表格了解 Bootstrap 網格系統的各個方面如何跨多個設備工作。

	超小 <576px	小 ≥576px	中 ≥768px	大 ≥992px	特大 ≥1200px
最大容器寬度	無（自動）	540像素	720像素	960像素	1140像素
類前綴	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# 列數	12
天溝寬度	30 像素（每列各 15 像素）
可嵌套	是的
列排序	是的

自動佈局列

利用特定於斷點的列類來輕鬆調整列大小，而無需像.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>

等寬的列可以分成多行，但是有一個Safari flexbox 錯誤，在沒有明確的flex-basis或border. 舊版瀏覽器有一些變通方法，但如果您是最新版本，則不需要它們。

柱子

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

設置一列寬

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

1 個，共 3 個

3 個中的 2 個（更寬）

3 之 3

1 個，共 3 個

3 個中的 2 個（更寬）

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>

等寬多行

.w-100通過在您希望列換行的位置插入一個新行來創建跨多行的等寬列。.w-100通過與一些響應式顯示實用程序混合來使休息時間響應。

山口

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

響應類

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

所有斷點

對於從最小設備到最大設備都相同的網格，請使用.col和.col-*類。當你需要一個特別大小的列時，指定一個編號的類；否則，請隨意堅持.col。

山口

col-8

col-4

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

堆疊成水平

使用一組.col-sm-*類，您可以創建一個基本的網格系統，該系統從堆疊開始並在小斷點 ( sm) 處變為水平。

col-sm-8

col-sm-4

col-sm

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

連連看

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

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

結盟

使用 flexbox 對齊實用程序來垂直和水平對齊列。

垂直對齊

三列之一

<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. 這會從所有直接子列中刪除負數margins.row和水平線。padding

這是創建這些樣式的源代碼。請注意，列覆蓋的範圍僅限於第一個子列，並通過屬性選擇器定位。雖然這會生成更具體的選擇器，但仍可以使用間距實用程序進一步自定義列填充。

需要邊緣到邊緣的設計？刪除父級.container或.container-fluid.

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

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

在實踐中，它看起來是這樣的。請注意，您可以繼續將其與所有其他預定義的網格類（包括列寬、響應層、重新排序等）一起使用。

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

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .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="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>

分欄符

在 flexbox 中將列換行需要一個小技巧：width: 100%在您想要將列換行的任何位置添加一個元素。通常這是通過多個.rows 來完成的，但並不是每個實現方法都可以解決這個問題。

.col-6 .col-sm-3

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

您還可以使用我們的響應式顯示實用程序在特定斷點應用此中斷。

.col-6 .col-sm-4

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

重新排序

訂單類

使用.order-類來控制內容的視覺順序。這些類是響應式的，因此您可以設置order斷點（例如，.order-1.order-md-2）。包括對所有五個網格層1的支持。12

首先，但無序

第二，但最後

第三，但首先

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

還有響應式.order-first和.order-last類分別通過應用和( )來改變order元素的屬性。這些類也可以根據需要與編號的類混合。order: -1order: 13order: $columns + 1.order-*

首先，但最後

第二，但無序

第三，但首先

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but 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="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>

除了在響應斷點處清除列之外，您可能還需要重置偏移量。請參閱網格示例中的實際操作。

.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="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>

保證金效用

隨著 v4 中向 flexbox 的遷移，您可以使用邊距實用程序，例如.mr-auto強制兄弟列彼此遠離。

.col-md-4

.col-md-4 .ml-自動

.col-md-3 .ml-md-自動

.col-auto .mr-自動

.col-auto

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

嵌套

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

級別 1：.col-sm-9

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

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

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

Sass 混合

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

變量

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

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

混合

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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

示例用法

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

.example-container {
  width: 800px;
  @include make-container();
}

.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-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 %) 中設置網格值。