Bootstrap 简明教程
Bootstrap - Containers
本节将讨论 Bootstrap 容器。容器用于在其之内填充内容。
This chapter will discuss about Bootstrap containers. Containers are used to pad content within them.
默认网格系统需要容器（网格系统使用一系列容器、行和列来对齐内容）。容器用于包含、填充和居中其内部的内容。容器也可以被嵌套，尽管大多数布局并不需要嵌套容器。
Containers are required for default grid system (Grid system uses a series of containers, rows and columns to align content). Containers are used to contain, pad, and center the content within them. Containers can also be nested, though most layouts don’t require a nested container.
Bootstrap 中有三种不同的容器类：
There are three different container classes in Bootstrap:
-
.container (sets responsive max-widths).
-
.container-{breakpoint} (*width: 100% * until specified breakpoint).
-
.container-fluid (width: 100% at all breakpoints).
下方表格显示了容器的 max-width （与原始 .container 和 .container-fluid 相比）如何在每个断点中变化：
How the max-width of the container (when compared to original .container and .container-fluid) varies across each breakpoint is shown in the below table:
可以在章节 Grid Demo 中看到相同的示例
Examples of the same can be seen in chapter 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 类，它创建一个响应式固定宽度容器。
Use .container class which creates a responsive fixed-width container.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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
-
Use responsive containers to declare a class that is 100% wide until the specific breakpoint is reached, after that use max-widths for all subsequent breakpoints.
-
Use the .container-sm|md|lg|xl classes to decide whether the container should be responsive or not.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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 类创建一个全宽容器。它们跨越屏幕的整个宽度。
Use the .container-fluid class to create a full width container. They span the entire width of the screen.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>