容器（Containers）

運作原理（How they work）

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

Bootstrap 提供三種不同的容器：

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

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

在我們的格線系統範例中查看它們的實際效果並進行比較。

預設容器（Default container）

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

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

響應式容器（Responsive containers）

響應式容器讓您可以指定一個在達到指定中斷點之前為 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>

流動容器（Fluid containers）

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

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

CSS

Sass 變數（Sass variables）

如上所示，Bootstrap 生成一系列預先定義的容器類別來幫助您建立所需的版面配置。您可以透過修改驅動它們的 Sass map（位於 _variables.scss）來自訂這些預先定義的容器類別：

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

有關如何修改我們的 Sass maps 和變數的更多資訊和範例，請參閱格線系統文件的 Sass 部分。

Sass mixins

除了自訂 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();
}