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

Question

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

在第1格下，我增加了第三个div的边距。

下面是我的代码：

<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类，最终需要使用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类将使用可用的空间，而不设置宽度，仅设置断点。

Answer 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）。