如何解決 Bootstrap 3 流體網格中的水平對齊問題？

Bootstrap 3 流體網格中的佈局問題

嘗試使用Bootstrap 3 建立流體網格佈局時，使用者可能會遇到對齊問題，其中當一個框超出其他框的高度時，網格內的框不會水平對齊。這種錯位的發生是由於列中的內容高度不同。

要解決此困境，可以採用三種主要方法：

1.透過CSS3 列寬度的純CSS 解

2. Clearfix方法

3.同位素/磚石外掛程式

2017年及以後更新

Flexbox（Bootstrap 4 和稍後）

解決高度差異問題的現代解決方案是使用Flexbox 強制列具有相等的高度，預設情況下，Bootstrap 4 中存在該功能。

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

其他資源

訪問提供的連結以現場演示解決方案並進一步探索這個主題。

以上是如何解決 Bootstrap 3 流體網格中的水平對齊問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！