Bootstrap 简明教程

Bootstrap - Spacing

本章讨论了 Bootstrap 为间距提供的实用类。

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

breakpoint

size

xs

⇐576px

sm

>=576px

md

>=768px

lg

>=992px

xl

>=1200px

xxl

>=1400px

这些类的命名格式如下：

breakpoint

naming format

xs

{property}{sides}-{size}

sm、md、lg、xl、xxl

{property}{sides}-{breakpoint}-{size}

其中 property 可为下列之一：

property

value

m

margin

p

padding

其中 sides 可为下列之一：

side

value

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

blank

所有四边的 margin 和 padding

其中 size 可为下列之一：

size

value

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

我们来看 margin 实用工具的一个示例：

Example

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

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

我们来看 padding 实用工具的一个示例：

Example

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

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

Horizontal centering

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

我们看一个示例：

Example

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

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

Gap utilities

可在父元素上使用 gap 实用工具，同时使用 display: grid 或 display: flex 。默认情况下， gap 实用工具具有响应性。

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

我们看一个示例：

Example

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

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

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

我们看一个示例：

Example

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

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

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

我们看一个示例：

Example

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

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