提问者:小点点

引导列未正确对齐


我的专栏里有一个奇怪的bug,我无法识别,我不知道这是我的错还是一个引导程序。

基本上,我有一个

问题是,在某些行,一个div完全疯了,不会在行中正确对齐(尝试慢慢调整小提琴中的结果大小,你会明白我的意思)。

我使用的是Bootstrap3.3。6和Chrome的最新版本(在FF上试用,相同的奇怪结果…)。“clearfix”什么都不做。我试过派克。js也得到了同样的结果。

这个答案(引导列没有正确对齐)会对我有所帮助,但我不知道我会有多少列(因为这取决于屏幕大小)。。。

当然,我已经尝试了设置min高度到每个. Gallery项目...

有什么想法吗?

提前感谢,,

更新,以下是我的代码中缺少的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;
}

感谢所有:)


共1个答案

匿名用户

问题在于行中并非所有列的高度都相同。查看以下内容以确保柱高度相等。

链接此处

更新你摆弄这个方法,看看更新摆弄

添加CSS

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

将CSS类添加到库项中

row-eq-height gallery-item