CSS 在Bootstrap的行中为元素添加左右边距

在本文中，我们将介绍如何在Bootstrap的行（row）中为元素添加左右边距。Bootstrap是一个流行的前端框架，用于快速开发响应式网页和应用程序。它提供了一组易于使用的CSS类，可以方便地在网页布局中添加样式和元素。

在Bootstrap中，行（row）是一个包含12个列（column）的容器。我们可以在行中创建多个列，并使用CSS类来设置它们的宽度和样式。然而，在某些情况下，我们可能还需要为行内的元素添加额外的左右边距，以改善元素之间的视觉分隔和布局。

阅读更多：CSS 教程

通过自定义样式添加边距

一种常见的方法是通过创建自定义的CSS样式来为行内的元素添加左右边距。我们可以为目标元素定义一个新的类，并在自定义样式中设置相应的边距属性。

.custom-margin {
  margin-left: 10px;
  margin-right: 10px;
}

在上面的示例中，我们创建了一个名为”custom-margin”的自定义类，并设置了左右边距为10像素。然后，我们可以将这个类应用于任何我们想要添加边距的元素。

<div class="row">
  <div class="col-4 custom-margin">
    <!-- 第一个具有左右边距的列 -->
  </div>
  <div class="col-4 custom-margin">
    <!-- 第二个具有左右边距的列 -->
  </div>
  <div class="col-4 custom-margin">
    <!-- 第三个具有左右边距的列 -->
  </div>
</div>

在上面的HTML示例中，我们将”custom-margin”类应用于三个列元素，使它们都具有相同的左右边距。

使用Bootstrap的内置类

除了自定义样式外，Bootstrap还提供了一些内置的CSS类，可以应用于行内的元素以添加左右边距。这些类基于Bootstrap的网格系统，可快速为元素设置边距。

以下是一些常用的内置类：

ml-*: 为元素添加左边距，其中*可以是1至5的数字表示距离的倍数。例如，ml-2表示左边距为2倍的默认间距。
mr-*: 为元素添加右边距，用法与ml-*类似。
mx-*: 为元素同时添加左右边距，用法与ml-*类似。
pl-*: 为元素的内边距添加左边距，用法与ml-*类似。
pr-*: 为元素的内边距添加右边距，用法与ml-*类似。
px-*: 为元素的内边距同时添加左右边距，用法与ml-*类似。

以下示例演示了如何使用内置类为行内元素添加左右边距：

<div class="row">
  <div class="col-4 ml-2 mr-2">
    <!-- 第一个具有左右边距的列 -->
  </div>
  <div class="col-4 mx-3">
    <!-- 第二个具有左右边距的列 -->
  </div>
  <div class="col-4 pl-4 pr-4">
    <!-- 第三个具有左右边距的列 -->
  </div>
</div>

上述示例分别使用了不同的内置类来为每个列元素设置左右边距。你可以根据需要选择适当的类，并调整边距的距离。