如何修复 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中文网其他相关文章！