View on GitHub

容器 (Containers)

容器是 Bootstrap 的基本建構區塊，在給定的設備或是視區中包含、填充和對齊你的內容

On this page

如何使用

容器是 Bootstrap 中最基本的佈局元素，在使用我們的網格系統時是必需的。容器用於在容納，填充和（有時）使內容居中。儘管容器可以巢狀，但大部分排版不需要巢狀。

Bootstrap 本身自帶三種不同的容器：

.container, 每一個響應式斷點都會設置一個 max-width
.container-fluid, 所有斷點都是 width: 100%
.container-{breakpoint}, 直到指定斷點之前，都會是 width: 100%

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

可以在實際操作中觀看它們，並在我們的網格範例中進行比較。

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

預設容器

我們的預設類別 .container 是響應式的, 是一個響應的、固定寬度的 container，內含的 max-width 會在每個斷點中改變數值

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

響應式容器

使用響應式容器時將會保持在寬度 100%，直到達到指定斷點為止，接下來我們將針對每個較高的斷點設置 max-width。例如，.container-sm 在到達 sm 斷點之前的寬度都為 100％，之後它將以 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>

Sass

如上面範例所示，Bootstrap 預設會生成一系列的容器類別，以幫助您建立您所需要的佈局。您可以通過修改 Sass 原始碼（在 _variables.scss 中找到）來自定義這些預定義的容器類別：

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

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

有關如何修改 Sass 原始碼以及變數，請參考Grid 文件中的 Sass.