容器

容器是 Bootstrap 中最基本的布局元素,在使用默认网格系统时是必需的。容器用于容纳、填充和(有时)集中其中的内容。虽然容器可以嵌套,但大多数布局不需要嵌套容器。

Bootstrap附带三种不同的容器:

  • .container,它在每个响应拐点处设置最大宽度。
  • .container-fluid,在所有拐点处为 width: 100%
  • .container-{breakpoint},直到指定的拐点 width:100%

下表显示了每个容器的最大宽度与原始宽度的比较。集装箱和集装箱。容器流体穿过每个断点。

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%
默认容器

我们默认的 .container 类是一个响应性强、固定宽度的容器,这意味着它的最大宽度在每个断点处都会发生变化。

<div class="container">
        <!-- Content here -->
      </div>
响应式容器

响应式容器允许您指定一个100%宽的类,直到达到指定的拐点,然后我们为每个更高的拐点应用最大宽度。例如:在到达 sm 拐点之前,.container-sm 的宽度为100%,在该拐点处,它将与 mdlgxlxxl 一起放大。

<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>