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

在 Bootstrap 中添加列之间的间距

使用 Bootstrap 的网格系统时，您可能会遇到需要在列之间添加间距的情况。默认情况下，这些列彼此相邻放置。但是，您可以使用简单的 Bootstrap 解决方案轻松实现列之间的间距。

嵌套列

要在列之间创建间距，您可以将每个列包装在嵌套列中。例如，考虑以下代码：

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
      Column 1 content
    </div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12">
      Column 2 content
    </div>
  </div>
</div>

调整内部列的大小

通过以这种方式包装列，Bootstrap 会自动为列分配大约 10px 的填充内柱的左侧和右侧。这会导致外部列之间出现可见的空间。

自定义空间

要调整列之间的空间量，您可以指定内部列的宽度列。例如，如果你想要 100px 的空间，你可以将内部列更改为：

<div class="col-md-12">
<p><strong>结论</strong></p>
<p>使用嵌套列技术，很容易添加Bootstrap 中列之间的间距。当您想要强调特定元素或创建更具视觉吸引力的布局时，这尤其有用。</p>
</div>

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