如何消除 Bootstrap 4 列中的垂直间距？

消除 Bootstrap 4 列中的垂直间距

在 Bootstrap 4 中，不同高度的列倾向于垂直对齐，导致它们之间存在空白空间。出现这种情况是因为 Bootstrap 4 使用 Flexbox，导致列符合最高列的高度。

要解决此问题，您可以使用浮动，这是一种类似于 Bootstrap 3 的解决方法。以下是更新的 HTML 结构：

<div class="container">
  <div class="row d-lg-block">
    <div class="col-lg-9 float-left description">Description</div>
    <div class="col-lg-3 float-right sidebar">Sidebar</div>
    <div class="col-lg-9 float-left comments">Comments</div>
  </div>
</div>

在此示例中，“d-lg-block”类在大屏幕中的行上设置“display:block”，允许列浮动而不是弯曲。通过使用浮动，您可以控制列顺序，同时防止垂直间距过大。

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