如何在 Bootstrap 列之间添加边距/填充而不破坏布局？

如何在 Bootstrap 中添加列之间的边距/填充空间？

使用 Bootstrap 设计网站时，通常需要在列之间添加额外的边距或填充空间。在尝试实现此目标时，一些用户遇到了不令人满意的结果。

一种流行的方法是将列类修改为带有 pull-left 或 pull-right 的 col-md-5。然而，这种方法可能会产生太大的间隙。

更有效的解决方案是在原始 col-md-6 类中嵌套一个 div。然后可以使用所需的边距和填充来设计该 div 的样式。

这是一个示例：

<code class="html"><div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div></code>

<code class="css">.classWithPad {
    margin: 10px;
    padding: 10px;
}</code>

通过使用此方法，您可以轻松添加所需的边距和填充空间列之间不影响列布局。这种技术提供了灵活性，并允许精确控制元素之间的间距。

以上是如何在 Bootstrap 列之间添加边距/填充而不破坏布局？的详细内容。更多信息请关注PHP中文网其他相关文章！