引导列未正确对齐

Question

我的专栏中有一个我无法识别的奇怪错误，我不知道这是我的错还是引导问题。

基本上，我有一个<div class="row">，其中可能包含许多<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4">。我只想实现的是所有 col* 项目都适合屏幕（100% 宽度）并在调整大小时相互对齐。这正常工作得很好，除了这个JSFiddle。

问题在于，在某些行上，一个 div 完全疯狂，并且无法在行中正确对齐（尝试在小提琴中慢慢调整结果的大小，你会明白我的意思）。

我正在使用 bootstrap 3.3.6 和 Chrome 到其最新版本（在 FF 上尝试过，同样奇怪的结果......）。 “clearfix”什么都不做。我已经尝试过 packery.js，结果相同。

这个答案 (Bootstrap columns not aligning correctly) 会对我有所帮助，但我事先不知道我会有多少列（因为这将取决于屏幕大小）......

当然，我已经尝试将 min-height 设置为每个 .gallery-item...

有什么想法吗？

提前致谢，

更新，以下是我的代码中缺少的 CSS：

div.gallery-item {
    margin-bottom: 15px;
}

div.gallery-item, div.gallery-item * {
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
}

.gallery-item {
    cursor: pointer;
}

.gallery-item.active {
    background-color: rgba(128,192,255,0.5);
}

第二次更新，按照建议，我通过为每个画廊项目添加固定高度来使其工作，如下所示：

.gallery-item {
  height: 300px;
}

谢谢大家:)

Answer 1

问题是因为并非行内的所有列都等高。请查看以下内容以确保相同的列高。

Link here

用这种方法更新了你 Fiddle，看看updated Fiddle

添加了 CSS

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

将 CSS 类添加到 gallery-item

row-eq-height gallery-item