in English

容器

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

在本頁面

他們是如何工作的

容器是 Bootstrap 中最基本的佈局元素，在使用我們默認的網格系統時是必需的。容器用於包含、填充和（有時）將內容居中。雖然容器可以嵌套，但大多數佈局不需要嵌套容器。

Bootstrap 帶有三個不同的容器：

.container，它max-width在每個響應斷點處設置 a
.container-{breakpoint},width: 100%直到指定斷點
.container-fluid，width: 100%在所有斷點處

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

在我們的Grid 示例中查看它們並進行比較。

	超小 <576 像素	小的 ≥576像素	中等的 ≥768像素	大的 ≥992像素	超大 ≥1200像素	XX-大 ≥1400像素
`.container`	100%	540像素	720像素	960像素	1140像素	1320像素
`.container-sm`	100%	540像素	720像素	960像素	1140像素	1320像素
`.container-md`	100%	100%	720像素	960像素	1140像素	1320像素
`.container-lg`	100%	100%	100%	960像素	1140像素	1320像素
`.container-xl`	100%	100%	100%	100%	1140像素	1320像素
`.container-xxl`	100%	100%	100%	100%	100%	1320像素
`.container-fluid`	100%	100%	100%	100%	100%	100%

默認容器

我們的默認.container類是一個響應式、固定寬度的容器，這意味著它max-width在每個斷點處都會發生變化。

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

響應式容器

響應式容器允許您指定一個 100% 寬的類，直到達到指定的斷點，之後我們max-width為每個更高的斷點應用 s。例如，在到達斷點.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>

薩斯

如上所示，Bootstrap 會生成一系列預定義的容器類來幫助您構建您想要的佈局。您可以通過修改_variables.scss支持它們的 Sass 映射（在中找到）來自定義這些預定義的容器類：

$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 部分。