如何修復 Bootstrap 3 流體網格佈局中未對齊的框框？

對 Bootstrap 3 流體網格佈局問題進行故障排除

在 Bootstrap 3 流體網格佈局中遇到未對齊？盒子未能連續對齊可能是一個令人沮喪的問題。根本原因在於盒子內容物的高度不同。以下是解決此問題的有效方法：

1. CSS 方法（CSS3 列寬）

使用CSS3 列寬實作下列方法：[Bootply 示範](http ://bootply.com/85737)

2 。 「Clearfix」方法（響應式重置）

依照Bootstrap 的建議使用「clearfix」方法：[Bootply 示範](http://bootply.com/89910)

3。 Isotope/Masonry 外掛程式

對於替代解決方案，請考慮使用Isotope/Masonry 外掛程式：[Bootply 示範](http://bootply.com/61482)

2017 更新：Flexbox解

在Bootstrap 中4、flexbox提供了最優方案：

CSS:

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

Demo: [Flexbox Equal Height](https: //codepen.io/anon/pen/EbpvGe)

Bootstrap 其他可變高度的資源列：

• [Bootstrap 可變高度列](https://getbootstrap.com/docs/4.0/layout/grid /#equal-width)

以上是如何修復 Bootstrap 3 流體網格佈局中未對齊的框框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！