Столбцы начальной загрузки не выравниваются правильно

У меня есть странная ошибка в моих колонках, которую я не могу идентифицировать, я не знаю, моя ли это вина или загрузочная штука.

По сути, у меня есть один <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 с тем же результатом.

Этот ответ (столбцы начальной загрузки не выравниваются правильно) помог бы мне, но я не я не знаю заранее, сколько столбцов у меня будет (потому что это будет зависеть от размера экрана)...

Конечно, я пытался установить минимальную высоту для каждого .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;
}

Спасибо всем :)


html css twitter-bootstrap
person junta    schedule 19.07.2016    source источник
comment
добавьте min-height в ваш div .ta-center.. вот так: ` .ta-center{min-height:300px;}`   -  person Minal Chauhan    schedule 19.07.2016
comment
Я не советую использовать минимальную высоту, это не очень гибко.   -  person KCarnaille    schedule 19.07.2016
comment
Пожалуйста, включите любой существующий CSS в свой вопрос или скрипку.   -  person Riaan van Zyl    schedule 19.07.2016

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что не все столбцы внутри строки имеют одинаковую высоту. Посмотрите на следующее, чтобы обеспечить одинаковую высоту столбца.

Ссылка здесь

Обновленный Fiddle с этим подходом, взгляните на обновленный Fiddle

Добавлен CSS

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

Добавлен класс CSS в gallery-item

row-eq-height gallery-item
person daan.desmedt    schedule 19.07.2016
comment
Спасибо, но ваш jsFiddle, проблема все еще появляется при изменении размера, я сделаю обновление с очень коротким решением. Спасибо, в любом случае - person junta; 19.07.2016