如何消除 Bootstrap 4 中列之間的空白垂直空間？

處理Bootstrap 4 中列之間的空白垂直空間

在Bootstrap 4 中處理列時的一個常見問題是列之間存在空白垂直空間，尤其是在更大的視窗。發生這種情況是因為 Bootstrap 4 實作了 Flexbox 佈局，它會對齊列的高度。

理解行為

在 Flexbox 佈局中，一行中的所有列的高度與最高的列的高度相同柱子。例如，如果您有三個不同高度的列，則兩個較短的列將垂直延伸以符合最高列的高度。結果，出現了空白。

解決方案：使用浮點

由於巢狀列可能會破壞所需的列順序，因此 Bootstrap 4 中的解決方案是使用浮點。這模仿了 Bootstrap 3 的行為，其中列會彼此相鄰浮動。

要刪除空白的垂直空間，您可以使用下列 CSS：

.container {
  .row {
    display: block !important;
    .col {
      float: left;
    }
  }
}

此程式碼覆寫預設的 Flexbox 版面配置並設定要封鎖的行的顯示屬性。此外，它將列的浮動屬性設為左側，允許它們彼此相鄰浮動。

範例實作

這裡是一個範例HTML 結構，它使用浮動來消除空白的垂直空間:

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

透過使用浮動，您可以防止空白的垂直空間，並即使在較大的情況下也能保持所需的列順序視口。

以上是如何消除 Bootstrap 4 中列之間的空白垂直空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！