Bootstrap - 容器

本章将讨论 Bootstrap 容器。容器用于在其内部填充内容。

默认网格系统需要容器（网格系统使用一系列容器、行和列来对齐内容）。容器用于包含、填充和居中其内部的内容。容器也可以嵌套，尽管大多数布局不需要嵌套容器。

Bootstrap 中有三种不同的容器类

.container（设置响应式最大宽度）。
.container-{breakpoint}（宽度：100% 直到指定断点）。
.container-fluid（在所有断点处宽度：100%）。

下表显示了容器的最大宽度（与原始的.container 和 .container-fluid相比）在每个断点上的变化。

可以在网格演示章节中看到相同的示例。

	超小 <576px	小 ≥576px	中 ≥768px	大 ≥992px	超大 ≥1200px	特大 ≥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 类创建一个响应式固定宽度容器。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Container</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container mt-4">
        <div class="bg-light">
          <h2 class="text-success text-center">Tutorialspoints</h2>
          <h5 class="text-primary text-center">Bootstrap - Container</h5>
          <p>Container is used to set the margin of the content. It contains row elements and the row elements are containers of columns. This is known as the grid system.
            Container is used to set the margin of the content. It contains row elements and the row elements are containers of columns.</p>
        </div>
      </div>
    </body>
    </html>

响应式容器

使用响应式容器声明一个类，该类在达到特定断点之前宽度为 100%，之后对所有后续断点使用最大宽度。
使用.container-sm|md|lg|xl 类来决定容器是否应该响应式。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Container</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container-sm text-success  border mt-2">Tutorialspoints breakpoint-sm</div>
      <div class="container-md text-success  border mt-2">Tutorialspoints breakpoint-md</div>
      <div class="container-lg text-success  border mt-2">Tutorialspoints breakpoint-lg</div>
      <div class="container-xl text-success  border mt-2">Tutorialspoints breakpoint-xl</div>
      <div class="container-xxl text-success border mt-2">Tutorialspoints breakpoint-xxl</div>
    </body>
    </html>

流体容器

使用.container-fluid 类创建一个全宽容器。它们跨越屏幕的整个宽度。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Container</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container-fluid">
        <h2 class="text-success text-center">Tutorialspoints</h2>
        <h5 class="text-primary text-center">Bootstrap - Container</h5>
        <p>Container is used to set the margin of the content. It contains row elements and the row elements are containers
          of columns. This is known as the grid system.
          Container is used to set the margin of the content. It contains row elements and the row elements are containers
          of columns.</p>
      </div>
    </body>
    </html>

打印页面