如何工作

容器是Bootstrap中最基本的布局元素，在使用默認(rèn)網(wǎng)格系統(tǒng)時(shí)是必需的。容器用于容納、填充和（有時(shí)）集中其中的內(nèi)容。雖然容器可以嵌套，但大多數(shù)布局不需要嵌套的容器。

Bootstrap附帶三種不同的容器：

• .container, 在每個(gè)響應(yīng)斷點(diǎn)處設(shè)置最大寬度
• .container-fluid, 所有斷點(diǎn)處100%
• .container-{breakpoint}, 寬度：100%，直到指定的斷點(diǎn)

下表說明了每個(gè)容器的最大寬度與每個(gè)斷點(diǎn)上的原始.container和.container流體的比較。

你可以在我們的網(wǎng)格示例中查看并比較它們。

默認(rèn)容器

我們的默認(rèn)任容器類是一個(gè)響應(yīng)的、固定寬度的容器，這意味著它的最大寬度在每個(gè)斷點(diǎn)處都會(huì)改變。

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

響應(yīng)式容器

響應(yīng)容器允許您指定一個(gè)100%寬的類，直到達(dá)到指定的斷點(diǎn)，然后我們?yōu)槊總€(gè)較高的斷點(diǎn)應(yīng)用最大寬度。例如，.container sm在到達(dá)sm斷點(diǎn)之前是100%寬的，在這里它將以md、lg、xl和xxl進(jìn)行擴(kuò)展。

<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作為全寬容器，橫跨視口的整個(gè)寬度。

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

Sass

如上所示，Bootstrap生成一系列預(yù)定義的容器類來幫助您構(gòu)建所需的布局。您可以通過修改Sass映射（在_variables.scss中找到）來定制這些預(yù)定義的容器：

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

除了定制Sass之外，您還可以使用我們的Sass mixin創(chuàng)建自己的容器。

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

有關(guān)如何修改Sass映射和變量的更多信息和示例，請(qǐng)參閱網(wǎng)格文檔的Sass部分。