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

更新了您使用此方法，请查看updated Fiddle

添加了CSS

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

为gallery-item

添加了CSS类

row-eq-height gallery-item

Bootstrap列未正确对齐

1 个答案: