如何在Bootstrap中垂直堆疊不同高度的div？

使用 Bootstrap 靈活垂直堆疊 Div

您的問題尋求一種基於 CSS 的解決方案，在利用 Bootstrap 框架的同時垂直堆疊不同高度的 div 元素。這是一個全面的答案：

Bootstrap 的響應式網格系統優先考慮水平對齊和內容流。要實現不規則大小的 div 的垂直堆疊，需要更靈活的方法。

考慮將 .visible-* 實用程式類別與 .clearfix 結合使用。這些類別根據螢幕大小有條件地顯示或隱藏內容。

對於要垂直堆疊的每個div，添加以下程式碼：

<div>

這些類別的組合有效地清除了浮動各種螢幕尺寸，確保div 正確堆疊而不會重疊。它的工作原理如下：

• .visible-md .visible-lg 在小螢幕和超小螢幕上隱藏清除 div。
• .visible-sm 在中螢幕上隱藏清除 div，大螢幕和超大螢幕。

透過實作此解決方案，您可以實現 div 的最佳堆疊，同時保持與 Bootstrap 的兼容性。

以上是如何在Bootstrap中垂直堆疊不同高度的div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！