Bootstrap - 容器

本章将讨论 Bootstrap 容器。容器用于填充其中的内容。

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

Bootstrap 中存在三种不同的容器类：

  • .container（设置响应式最大宽度）。

  • .container-{breakpoint}（宽度：100%，直到指定断点）。

  • .container-fluid（宽度：所有断点处均为100% ）。

容器的最大宽度（与原始.container和.container-fluid相比）在每个断点上的变化情况如下表所示：

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

特小
<576px		 小
≥576px		 中等
≥768px		 大
≥992px		 超大
≥1200px		 XX 大
≥1400px
。容器

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像素
.容器流体 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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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>