如何在引导列之间添加 3px 边距答案

【问题标题】：How to add 3px margin between bootstrap cols如何在引导列之间添加 3px 边距
【发布时间】：2020-08-09 10:31:47
【问题描述】：

我想在块之间添加一些空间。我正在使用引导网格系统。

当我添加边距时，第三个 div 位于第 1 块下方。

下面是我的代码：

<div style='border:solid black 1px' class='col-md-6'>
  <h1>Block 1</h1>
</div>
<div style='border:solid black 1px' class='col-md-3'>
  <h1>Block 2</h1>
</div>
<div style='border:solid black 1px' class='col-md-3'>
  <h1>Block 3</h1>
</div>

【问题讨论】：

将 mr-1 或 ml-1 引导边距实用程序类添加到列中

标签： css margins bootstrap-grid

【解决方案1】：

您将需要使用col-md 类，最终使用mx-md-1 类或自己设置边距。

这是一个示例在整页中运行以调整大小并查看断点效果：

.row {/* for demo to show where is center & where it stands */
  border: solid;
  background: linear-gradient(to right, #4564 50%, #0008 50%)
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div style='border:solid black 1px' class=' col-md-6 '>
      <h1>Block 1</h1>
    </div>
    <div style='border:solid black 1px' class='  col-md mx-md-1'>
      <h1>Block 2</h1>
    </div>
    <div style='border:solid black 1px' class='  col-md-3 '>
      <h1>Block 3</h1>
    </div>
  </div>
</div>

col/col-sm/col-md/col-lg/col-xl 类将使用可用空间而不设置宽度，仅设置断点。

【讨论】：

【解决方案2】：

您可以使用 Offset classes 在 Bootstrap 的 Grid 系统中添加列之间的间距，就像您的示例一样：

<div style='border:solid black 1px' class='col-md-7'>
  <h1>Block 1</h1>
</div>
<div style='border:solid black 1px' class='col-md-3 offset-md-1'>
  <h1>Block 2</h1>
</div>
<div style='border:solid black 1px' class='col-md-3 offset-md-1'>
  <h1>Block 3</h1>
</div>

虽然您无法为该间距选择确切的像素数量，但您必须适应 Bootstrap 的单位（在课程结束时从 1 到 12）。

【讨论】：