Bootstrap 简明教程
Bootstrap - Gutters
本章将讨论 Bootstrap 间距。间距在列之间提供填充。可用间距响应式地间隔和对齐内容。
How it works
-
间距由水平 padding 生成，并且是列内容之间的空格。使用 padding-right 和 padding-left 对齐每列的内容。
-
间距的初始宽度为 1.5 rem ( 24px )，因此允许我们将网格对齐到 padding and margin spacers 的比例。
-
使用特定于断点的类调整间距，以更改水平、垂直和其他所有间距。
Horizontal gutters
.gx- * 类管理水平间距的宽度，如果使用较大的间距，则父类 .container 或 .container-fluid 可能需要调整以防止溢出。可以使用填充实用程序（例如 .px-4 ）来完成此操作，如下面的示例所示。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Gutters</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 px-4 text-center mt-2">
<div class="row gx-5">
<div class="col">
<div class="p-2 bg-info">First Column</div>
</div>
<div class="col">
<div class="p-2 bg-warning">Second Column</div>
</div>
</div>
</div>
</body>
</html>Using overflow functionality
另一个选择是为 .row 添加一个包装器，其中 .overflow-hidden 为类。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Gutters</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 overflow-hidden text-center">
<div class="row gx-5 mt-2">
<div class="col">
<div class="p-2 bg-info">First Column</div>
</div>
<div class="col">
<div class="p-2 bg-warning">Second Column</div>
</div>
</div>
</div>
</body>
</html>Vertical gutters
-
垂直间距用于实现响应式间隔、列之间的填充以及使用网格对齐内容。
-
当发生列换行时，使用 .gy- * 类来控制行中的垂直间距宽度。
-
它们可能导致页面末尾 .row 下方的溢出，就像水平间距一样。要解决此问题，请在 .row 的周围添加一个具有 .overflow-hidden 类的包装器。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Gutters</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 overflow-hidden text-center mt-2">
<div class="row gy-5">
<div class="col-6">
<div class="p-2 bg-info">First Column</div>
</div>
<div class="col-6">
<div class="p-2 bg-warning">Second Column</div>
</div>
<div class="col-6">
<div class="p-2 bg-info">Third Column</div>
</div>
<div class="col-6">
<div class="p-2 bg-warning">Fourth Column</div>
</div>
</div>
</div>
</body>
</html>Horizontal and vertical gutters
要控制水平和垂直网格间距，请使用 .g- * 类。使用较小的间距宽度。因此，我们不需要 .overflow-hidden 包装器类。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Gutters</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 text-center">
<div class="row g-2 mt-2">
<div class="col-6">
<div class="p-2 bg-info">First Column</div>
</div>
<div class="col-6">
<div class="p-2 bg-warning">Second Column</div>
</div>
<div class="col-6 ">
<div class="p-2 bg-info">Third Column</div>
</div>
<div class="col-6">
<div class="p-2 bg-warning">Fourth Column</div>
</div>
</div>
</div>
</body>
</html>Row columns gutters
可以将间距类添加到带有响应式设计的行列中。以下示例中使用了响应式行列和响应式间距类：
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Gutters</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 text-center">
<div class="row row-cols-2 row-cols-lg-3 g-2 g-lg-3 mt-2">
<div class="col">
<div class="p-3 bg-info">First Row column</div>
</div>
<div class="col">
<div class="p-3 bg-warning">Second Row column</div>
</div>
<div class="col">
<div class="p-3 bg-info">Third Row column</div>
</div>
<div class="col">
<div class="p-3 bg-warning">Fourth Row column</div>
</div>
<div class="col">
<div class="p-3 bg-info">Fifth Row column</div>
</div>
<div class="col">
<div class="p-3 bg-warning">Sixth Row column</div>
</div>
</div>
</div>
</body>
</html>No gutters
-
在网格类中，使用 .g-0 从列之间移除间距。这将移除 .row 的负边距以及直接子列的水平填充。
-
移除父级 .container 或 .container-fluid 以创建边缘到边缘的设计并向 .row 添加 .mx-0 以防止溢出。
-
无间隙消除行和列的边距和填充。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Gutters</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="row g-0 text-center mt-2">
<div class="col-sm-4 col-md-6 p-2 bg-info">First Column</div>
<div class="col-4 col-md-3 p-2 bg-warning">Second Column</div>
</div>
</body>
</html>