容器（Containers）
容器是Bootstrap的基本構建塊，用于在給定的設備或窗口中包含、填充和對齊內容。
On this page
如何工作
容器是Bootstrap中最基本的布局元素，在使用默認網格系統時是必需的。容器用于容納、填充和（有時）集中其中的內容。雖然容器可以嵌套，但大多數布局不需要嵌套的容器。
Bootstrap附帶三種不同的容器：
.container, 在每個響應斷點處設置最大寬度.container-fluid, 所有斷點處100%.container-{breakpoint}, 寬度：100%，直到指定的斷點
下表說明了每個容器的最大寬度與每個斷點上的原始.container和.container流體的比較。
你可以在我們的網格示例中查看并比較它們。
|
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% |
默認容器
我們的默認任容器類是一個響應的、固定寬度的容器，這意味著它的最大寬度在每個斷點處都會改變。
<div class="container">
<!-- Content here -->
</div>
響應式容器
響應容器允許您指定一個100%寬的類，直到達到指定的斷點，然后我們為每個較高的斷點應用最大寬度。例如，.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映射和變量的更多信息和示例，請參閱網格文檔的Sass部分。