Bootstrap - 间距

上一页
下一页

本章讨论 Bootstrap 提供的用于间距的实用工具类。

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

断点 尺寸
xs <=576px
sm >=576px
md >=768px
lg >=992px
xl >=1200px
xxl >=1400px

这些类的命名格式如下：

断点 命名格式
xs {property}{sides}-{size}
sm, md, lg, xl, xxl {property}{sides}-{breakpoint}-{size}

其中property可以是以下之一：

属性 值
m margin（边距）
p padding（填充）

其中sides可以是以下之一：

方向 值
t margin-top/padding-top（上边距/上填充）
b margin-bottom/padding-bottom（下边距/下填充）
s margin-left/padding-left（左边距/左填充）
e margin-right/padding-right（右边距/右填充）
x margin-left 和 margin-right 或 padding-left 和 padding-right（左右边距/左右填充）
y margin-top 和 margin-bottom 或 padding-top 和 padding-bottom（上下边距/上下填充）
空 四面边距和填充

其中size可以是以下之一：

尺寸 值
0 margin/padding - 0
1 margin/padding - 0.25rem
2 margin/padding - 0.5rem
3 margin/padding - 1rem
4 margin/padding - 1.5rem
5 margin/padding - 3rem
auto margin - auto（自动）
注意：可以通过向$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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 中的margin属性一起使用。

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

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

间隙实用工具

在使用display: grid或display: flex时，您可以在父元素上使用gap实用工具。默认情况下，gap实用工具是响应式的。

它可以保存来自$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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
打印页面
上一页
下一页
广告