Bootstrap - 排水沟

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

怎么运行的

  • 装订线由水平填充生成，是列内容之间的空格。在每列上使用padding-right和padding-left对齐内容。

  • 装订线的起始宽度为1.5 rem ( 24px )，因此允许我们将网格与填充和边距间隔符的比例对齐。

  • 使用特定于断点的类调整装订线以更改水平、垂直和所有其他装订线。

水平排水沟

.gx-*类管理水平装订线的宽度，如果使用较大的装订线，则父级.container或.container-fluid可能需要调整以防止溢出。这可以使用填充实用程序来完成，例如.px-4，如下例所示。

例子

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

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

使用溢出功能

将带有.overflow-hidden类的包装器添加到.row是另一种选择。

例子

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

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

垂直排水沟

  • 垂直装订线用于响应式间距、列之间的填充以及将内容与网格对齐。

  • 当发生列换行时，使用.gy-*类来控制行中的垂直装订线宽度。

  • 它们可能会导致页面末尾的.row下面出现一些溢出，例如水平装订线。要解决此问题，请在.row周围添加带有.overflow-hidden类的包装器。

例子

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

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

水平和垂直排水沟

要控制水平和垂直网格间距，请使用.g-*类。使用较小的装订线宽度。因此，我们不需要.overflow-hidden包装类。

例子

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

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

行列排水沟

可以通过响应式设计将装订线类添加到行列。下面的示例中使用了响应式行列和响应式装订线类：

例子

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

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

无排水沟

  • 删除网格类中带有.g-0的列之间的间距。这会删除.row中的负边距以及直接子列中的水平填充。

  • 删除父级.container 或.container-fluid 以创建边到边设计，并将.mx-0添加到.row以防止溢出。

  • 没有装订线消除了行和列的边距和填充。

例子

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

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