首頁 >web前端 >css教學 >如何消除 Bootstrap 4 中列之間的空白垂直空間?

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

Susan Sarandon
Susan Sarandon原創
2024-11-10 17:50:02856瀏覽

How to Eliminate Empty Vertical Space Between Columns in 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn