使用CSS Clearfixes 在Bootstrap 中垂直對齊不均勻高度的Div
目標是垂直對齊Bootstrap 行中不同高度的div,而無需使用Masonry 等外部插件。這是一個 CSS 解決方案:
在提供的 HTML 結構中,每個類別都由具有「menu-category」類別的 div 表示。由於每個類別中的項目不同,這些 div 具有不同的高度。為了實現所需的堆疊,我們可以利用 Bootstrap 的可見性類別。
具體來說,我們可以添加一個帶有可見性修飾符的「clearfix」類,以選擇性地清除 div 佈局中的浮動。例如,如果您只想在中大螢幕尺寸下清除浮動,則可以使用以下程式碼:
<div class="clearfix visible-md visible-lg"></div>
同樣,如果您只想在小螢幕尺寸下清除浮動,請使用:
<div class="clearfix visible-sm"></div>
透過將這些清除div 新增至HTML 結構中的適當位置,您可以防止浮動div 換行到下一行,迫使它們堆疊垂直。
例如:
透過這種方法,div 高度將根據內容動態調整,確保它們整齊地堆疊在行容器內。
以上是如何使用 CSS Clearfixes 垂直對齊 Bootstrap 行中不均勻高度的 Div?的詳細內容。更多資訊請關注PHP中文網其他相關文章!