如何添加 Bootstrap 列之间的间距？

如何在 Bootstrap 列之间引入间距

在 Bootstrap 中，定义列可以轻松对齐和内容分布。但是，默认的列对齐方式直接并列列，消耗了整个可用空间。在列之间引入足够的间距可以增强可读性和视觉吸引力。

要在列之间引入间距，您可以在每个 col-md-6 列中嵌套一个额外的 col-md-12 列。这将创建一个容器，有效地在外部列之间添加间隙。

示例代码：

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
      Some Content...
    </div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12">
      Some Second Content...
    </div>
  </div>
</div>

此代码结构确保外部 col-md-6列具有嵌套的 col-md-12 列，它们之间引入了空格。 col-md-12 列有效地创建了一个间隙，同时保持了外部列内的原始宽度划分。

输出：

[带有间距的输出图像两列之间]

通过实现此方法，您可以在不影响原始列大小的情况下自动添加列之间的间距。

以上是如何添加 Bootstrap 列之间的间距？的详细内容。更多信息请关注PHP中文网其他相关文章！