容器

它們如何運作

容器是 Bootstrap 中最基本的版面元素，而且在使用我們的預設格狀系統時是必要的。容器用於包含、填補，以及（有時）置中其內的內容。雖然容器可以巢狀，但大多數版面不需要巢狀容器。

Bootstrap 附帶三種不同的容器

• .container，在每個回應中斷點設定一個 max-width
• .container-{breakpoint}，在指定中斷點之前為 width: 100%
• .container-fluid，在所有中斷點為 width: 100%

下表說明每個容器的 max-width 與原始 .container 和 .container-fluid 在每個中斷點的比較。

在我們的 網格範例 中查看它們的實際運作並比較它們。

預設容器

我們的預設 .container 類別是一個回應式、固定寬度的容器，表示它的 max-width 會在每個中斷點改變。

<div class="container">
  <!-- Content here -->
</div>

回應式容器

回應式容器允許您指定一個類別，在達到指定中斷點之前為 100% 寬度，之後我們會套用每個較高中斷點的 max-width。例如，.container-sm 在一開始為 100% 寬度，直到達到 sm 中斷點，然後它會隨著 md、lg、xl 和 xxl 縮放。

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

流動容器

使用 .container-fluid 來建立一個全寬容器，橫跨視窗的整個寬度。

<div class="container-fluid">
  ...
</div>

CSS

Sass 變數

如上所示，Bootstrap 產生一系列預定義的容器類別，以協助您建立所需的版面。您可以透過修改 Sass 地圖（位於 _variables.scss）來自訂這些預定義的容器類別，而這些地圖就是它們的動力

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

有關如何修改我們的 Sass 地圖和變數的更多資訊和範例，請參閱 Grid 文件的 Sass 區段。

Sass mixin

除了自訂 Sass 之外，您還可以透過我們的 Sass mixin 建立自己的容器。

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}