如何消除 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中文網其他相關文章！