Bootstrap5 容器文檔翻譯

容器

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

它們的工作原理

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

Bootstrap 附帶三種不同的容器：

.container，在每個響應斷點處設置 max-width
.container-fluid，它處於所有斷點 width: 100%
.container-{breakpoint}，直到指定的斷點 width: 100%
下表說明了每個容器與原始容器的比較情況以及每個斷點之間的比較情況。
max-width.container.container-fluid

查看它們的實際效果，並在網格示例中比較它們。

默認容器

我們的默認類是一個響應式的固定寬度容器，這意味着它在每個斷點處都會更改。
.containermax-width

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

響應式容器

響應式容器允許您指定一個 100% 寬的類，直到到達指定的斷點，之後我們對每個較高的斷點應用 s。例如，在到達斷點之前，起始寬度爲 100%，它將進行縱向擴展。
max-width.container-smsmmdlgxlxxl

<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();
}