Bootstrap 简明教程

Bootstrap - Gutters

本章将讨论 Bootstrap 间距。间距在列之间提供填充。可用间距响应式地间隔和对齐内容。

This chapter will discuss about Bootstrap gutters. Gutter provides padding between your columns. Gutters are used to responsively space and align content.

How it works

  1. Gutters are generated by horizontal padding, and are spaces between the column content. Align the content using padding-right and padding-left on each column.

  2. Gutters begin at a width of 1.5 rem (24px), hence allows us to align grid to the scale of padding and margin spacers.

  3. Adjust gutters with breakpoint-specific classes to change horizontal, vertical, and all other gutters.

Horizontal gutters

.gx- * 类管理水平间距的宽度，如果使用较大的间距，则父类 .container 或 .container-fluid 可能需要调整以防止溢出。可以使用填充实用程序（例如 .px-4 ）来完成此操作，如下面的示例所示。

.gx-* classes manage the widths of horizontal gutters, and if larger gutters are used, the parent .container or .container-fluid may require adjustment to prevent overflow. This can be done using a padding utility, such as .px-4 as demonstarted in below example.

Example

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

You can edit and try running this code using *Edit & Run *option.

    <!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 为类。

Adding a wrapper with the .overflow-hidden class to .row is another option.

Example

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

You can edit and try running this code using *Edit & Run *option.

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

  1. The vertical gutter is used for responsive spacing, padding between columns, and aligning content with the grid.

  2. Use .gy-* classes to control vertical gutter widths in a row when column wrapping occurs.

  3. They can cause some overflow below the .row at the end of a page, like the horizontal gutters. To fix this, add a wrapper with .overflow-hidden class around a .row.

Example

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

You can edit and try running this code using *Edit & Run *option.

    <!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 包装器类。

To control the horizontal and vertical grid gutters, use .g-* classes. Use smaller gutter width. So, we won’t need of .overflow-hidden wrapper class.

Example

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

You can edit and try running this code using *Edit & Run *option.

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

可以将间距类添加到带有响应式设计的行列中。以下示例中使用了响应式行列和响应式间距类：

Gutter classes can be added to row columns with responsive design. Responsive row columns and responsive gutter classes are used in the example below:

Example

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

You can edit and try running this code using *Edit & Run *option.

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

  1. Remove gutters between columns with .g-0 in grid classes. This removes negative margins from .row and horizontal padding from immediate children columns.

  2. Remove the parent .container or .container-fluid to create an edge-to-edge design and add .mx-0 to the .row to prevent overflow.

  3. No gutters eliminates margin and padding for both row and columns.

Example

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

You can edit and try running this code using *Edit & Run *option.

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