如何在 bootstrap 列之间添加 3px 边距

Question

我想在块之间添加一些 space。我正在使用 bootstrap 网格系统。

当我添加保证金时，第三个 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>

Answer 1

您将需要使用 col-md class and eventually an mx-md-1 class 或自行设置保证金。

这里有一个例子 到运行在整页中调整大小并查看断点效果 :

.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 classes 将使用 space avalaible 没有设置宽度，只有一个断点。

Answer 2

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

<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 的单位（从 class 末尾的 1 到 12）。

如何在 bootstrap 列之间添加 3px 边距

How to add 3px margin between bootstrap cols

css

margins

bootstrap-grid