容器
容器是 Bootstrap 的基本构建块,它包含、填充和对齐给定设备或视口中的内容。
在此页
他们是如何工作的
容器是 Bootstrap 中最基本的布局元素,在使用我们默认的网格系统时是必需的。容器用于包含、填充和(有时)将其中的内容居中。虽然容器可以嵌套,但大多数布局不需要嵌套容器。
Bootstrap 带有三个不同的容器:
.container
,它max-width
在每个响应断点处设置一个.container-{breakpoint}
,width: 100%
直到指定的断点.container-fluid
,width: 100%
在所有断点处
下表说明了每个容器max-width
与原始容器.container
以及.container-fluid
跨每个断点的比较情况。
在我们的Grid 示例中查看它们的实际效果并进行比较。
特别小 <576px |
小的 ≥576px |
中等的 ≥768px |
大 ≥992px |
特大号 ≥1200px |
XX-大号 ≥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% |
默认容器
我们的默认.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>
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 映射和变量的更多信息和示例,请参阅Grid 文档的 Sass 部分。