Bootstrap 简明教程

Bootstrap - Containers

本节将讨论 Bootstrap 容器。容器用于在其之内填充内容。

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

Bootstrap 中有三种不同的容器类：

.container (sets responsive max-widths).
.container-{breakpoint} （在指定断点之前*：宽度 100%）。
.container-fluid （在所有断点中 width: 100% ）。

下方表格显示了容器的 max-width （与原始 .container 和 .container-fluid 相比）如何在每个断点中变化：

可以在章节 Grid Demo 中看到相同的示例

	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%

Default Containers

使用 .container 类，它创建一个响应式固定宽度容器。

Example

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

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

Responsive Containers

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

Example

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

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

Fluid Containers

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

Example

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

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