Bootstrap - 间距

本章讨论 Bootstrap 提供的用于间距的实用程序类。

Bootstrap 提供了预定义范围的响应式边距、填充和间隙实用程序类，可用于修改元素的外观。这些实用程序类适用于所有类型的断点，例如：

断点 尺寸
xs <=576 像素
SM >=576 像素
MD >=768 像素
lg >=992 像素
XL >=1200 像素
xxl >=1400 像素

这些类的命名格式如下：

断点 命名格式
xs {属性}{边}-{大小}
SM、MD、LG、XL、XXL {属性}{边}-{断点}-{大小}

其中属性可以是以下之一：

财产 价值
米 利润
p 填充

其中side可以是以下之一：

边 价值
t 顶部边距/顶部填充
乙 底部边距/底部填充
s 左外边距/左内边距
e 右外边距/右内边距
X margin-left 和 margin-right 或 padding-left 和 padding-right
y margin-top 和 margin-bottom 或 padding-top 和 padding-bottom
空白的 所有四个边的边距和填充

其中大小可以是以下之一：

尺寸 价值
0 边距/填充 - 0
1 边距/填充 - 0.25rem
2 边距/填充 - 0.5rem
3 边距/填充 - 1rem
4 边距/填充 - 1.5rem
5 边距/填充 - 3rem
汽车 保证金 - 自动
注意：可以通过向$spacers Sass 映射变量添加条目来添加更多大小。

让我们看一个保证金效用的例子：

例子

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

<!DOCTYPE html>
<html>
   <head>
       <title>Bootstrap - Spacing</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-3">
        <h4 class="display-4">Spacing margin utilities</h4>
        <p><u>Set the spacing (margin) of an element with the {property}{sides}-{breakpoint}-{size} classes.</u></p>
        <div class="mt-4 bg-info">Only top margin (1.5rem)</div>
        <div class="mb-5 bg-light">Only bottom margin (1rem)</div>
        <div class="ms-5 bg-warning">Only left margin (3rem)</div>
        <div class="me-5 bg-warning">Only right margin (3rem)</div>
        <div class="mx-5 text-bg-secondary">Both left and right margins (3rem)</div>
        <div class="my-5 bg-primary">Both top and bottom margins (3rem)</div>
      </div>
   </body>
</html>

让我们看一个填充实用程序的示例：

例子

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

<!DOCTYPE html>
<html>
   <head>
       <title>Bootstrap - Spacing</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-3">
        <h4 class="display-4">Spacing padding utilities</h4>
        <p><u>Set the spacing (padding) of an element with the {property){sides}-{breakpoint}-{size} classes.</u></p>
        <div class="pt-4 bg-info">Only top padding (1.5rem)</div>
        <div class="pb-5 text-bg-success">Only bottom padding (1rem)</div>
        <div class="ps-5 bg-warning">Only left padding (3rem)</div>
        <div class="pe-5 text-bg-danger">Only right padding (3rem)</div>
        <div class="px-5 text-bg-secondary">Both left and right padding (3rem)</div>
        <div class="py-5 text-bg-primary">Both top and bottom padding (3rem)</div>
      </div>
   </body>
</html>

水平居中

对于水平居中固定宽度的块级内容，Bootstrap 提供了.mx-auto类。

让我们看一个例子：

例子

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

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap - Spacing</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-3">
        <h4 class="display-5">Horizontal centering</h4><br>
        <div class="mx-auto p-2 text-bg-success" style="width: 200px;">
          Horizontally centered
        </div>
      </div>
   </body>
</html>

  • 默认情况下，负值可以与CSS 中的边距属性一起使用。

  • 负值不能与padding一起使用。

  • 可以通过将变量$enable-negative-margins设置为true来启用负边距。

差距公用事业

您可以在使用display: grid或display: flex的同时，在父元素上使用间隙实用程序。默认情况下，间隙实用程序是响应式的。

它可以保存$spacers映射(0-5)中所有六个尺寸的值。没有.gap-auto类，因为它与.gap-0相同。

让我们看一个例子：

例子

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

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Spacing</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-3">
      <h4 class="display-6">
          gap utility
      </h4>
      <h4>gap utility class <i>.gap-*</i></h4>
      <div class="d-grid gap-0 p-3 border border-primary bg-light">
          <div class="p-2 bg-light border">
              gap-0
          </div>
          <div class="p-2 bg-light border">
              gap-0
          </div>
      </div>
      <div class="d-grid gap-1 p-3 border border-danger bg-primary-subtle">
          <div class="p-2 bg-light border">
            gap-1
          </div>
          <div class="p-2 bg-light border">
            gap-1
          </div>
      </div>
      <div class="d-grid gap-2 p-3 border border-success bg-danger-subtle">
          <div class="p-2 bg-light border">
            gap-2
          </div>
          <div class="p-2 bg-light border">
            gap-2
          </div>
      </div> 
    </div>
  </body>
</html>

行距

为了设置指定容器中子项之间的垂直间距，请使用实用程序类.row-gap。

让我们看一个例子：

例子

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

<!DOCTYPE html>
<html>
   <head>
     <title>Bootstrap - Spacing</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-3">
        <h4 class="display-6">
         gap utility
        </h4>
        <h4>row gap utility class <i>.row-gap-*</i></h4>
        <div class="d-grid gap-0 row-gap-4">
          <div class="p-2 border bg-primary">
            row gap-4
          </div>
          <div class="p-2 border bg-info">
            row gap-4
          </div>
          <div class="p-2 border bg-warning">
            row gap-4
          </div>
          <div class="p-2 border bg-danger-subtle">
            row gap-4
          </div>
        </div>
      </div> 
     </div>
   </body>
</html>

柱间隙

为了设置指定容器中子项之间的水平间距，请使用实用程序类.column-gap。

让我们看一个例子：

例子

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

<!DOCTYPE html>
<html>
   <head>
     <title>Bootstrap - Spacing</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-3">
      <h4 class="display-4">
        gap utility
      </h4>
      <h4>column gap utility class <i>.column-gap-*</i></h4>
      <div class="d-flex gap-0 column-gap-4">
        <div class="p-2 g-col-6 border border-primary">Grid item 1</div>
        <div class="p-2 g-col-6 border border-primary">Grid item 2</div>
        <div class="p-2 g-col-6 border border-primary">Grid item 3</div>
        <div class="p-2 g-col-6 border border-primary">Grid item 4</div>
      </div>
      <div class="d-flex gap-0 column-gap-2">
        <div class="p-2 g-col-6 border border-success">Grid item 1</div>
        <div class="p-2 g-col-6 border border-success">Grid item 2</div>
        <div class="p-2 g-col-6 border border-success">Grid item 3</div>
        <div class="p-2 g-col-6 border border-success">Grid item 4</div>
      </div>
     </div>
   </body>
</html>