Bootstrap5 容器(Containers)

半兽人 发表于: 2020-06-27   最后更新时间: 2020-06-27  

容器

容器是Bootstrap的一个基本组件,它可以在给定的设备或视图中包含、填充和对齐你的内容。

如何工作的

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

Bootstrap有三个不同的容器。

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

下表说明了每个容器的max-width与原始.container.container-fluid在每个断点上的比较。

在我们的网格示例中,可以看到它们的运行情况并进行比较。

name 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%宽的类,直到达到指定的断点,然后我们为每个更高的断点应用最大宽度。例如,.container-sm100%宽开始,直到达到sm断点,在那里它将扩展到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>

Fluid containers(液态容器)

Use .container-fluid for a full width container, spanning the entire width of the viewport.

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


您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: 到头了!
下一条: Bootstrap5 网格(Grid)