in English
容器
容器是 Bootstrap 的基本構建塊,它在給定的設備或視口中包含、填充和對齊您的內容。
在本頁面
他們是如何工作的
容器是 Bootstrap 中最基本的佈局元素,在使用我們默認的網格系統時是必需的。容器用於包含、填充和(有時)將內容居中。雖然容器可以嵌套,但大多數佈局不需要嵌套容器。
Bootstrap 帶有三個不同的容器:
.container
,它max-width
在每個響應斷點處設置 a.container-fluid
,width: 100%
在所有斷點處.container-{breakpoint}
,width: 100%
直到指定斷點
下表說明了每個容器max-width
與原始容器的比較.container
以及.container-fluid
跨每個斷點的比較。
在我們的Grid 示例中查看它們並進行比較。
超小 <576px |
小 ≥576px |
中 ≥768px |
大 ≥992px |
超大 ≥1200px |
XX-大 ≥1400px |
|
---|---|---|---|---|---|---|
.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 部分。