Ответ 1

Я не уверен точно, что вы пытаетесь выполнить, но проблема вызвана тем, что содержимое столбцов изменяется по высоте. Существует 3 общих подхода к устранению проблем выравнивания/высоты сетки.

1.. Только CSS-подход (с использованием ширины столбца CSS3).

http://bootply.com/85737

2. Такой подход "clearfix" (требует итерации каждые x столбцов). Это подход рекомендованный Bootstrap, известный как "отзывчивый сброс" .

http://bootply.com/89910 (есть также только для CSS вариация этого подхода)

3. Наконец, вы можете использовать плагин Isotope/Masonry. Вот рабочий пример, который использует Isotope + Bootstrap..

http://bootply.com/61482

Обновление 2017

Другой вариант - сделать столбцы одинаковой высоты (используя flexbox):

Поскольку проблема вызвана разницей в высоте, вы можете сделать столбцы равной высотой по каждой строке. Flexbox - лучший способ сделать это и поддерживается в Bootstrap 4.

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Flexbox равная высота Демо

Подробнее о столбцах переменной высоты загрузки

Ответ 2

У меня была аналогичная проблема. Я исправил этот script довольно быстро и безболезненно:

<script>
  $.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
    $('#container').isotope({
      itemSelector : '.items',
      layoutMode : 'fitRows'
    });
  });
</script>

в вашем случае вам нужно будет добавить идентификатор контейнера, например. '#container' и добавьте класс к каждому элементу, например. '.item'

Ответ 3

Обеспечьте высоту для каждого столбца <div>.

Я бы дал вашим столбцам имя класса:

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 outer">
    ...
</div>

И затем сделайте что-то вроде этого:

.outer {
    height: 200px /* Or whatever the height really is */
}

Ваши столбцы изложены странно из-за разной высоты ящиков. Выполнение высоты элемента контейнера будет исправлять это.

Лучшая часть - это не требует добавления случайного <div>, который не имеет никакого отношения к контенту.

EDIT:

Вы также можете установить высоту только при использовании контрольных точек "см" и выше.

Это гарантирует, что все строки будут использоваться при использовании столбцов и что между ними не будет больших промежутков, когда они будут иметь полную ширину (то есть col-xs-12).

@media (min-width: 768px) {
    .outer {
        height: 200px /* Or whatever */
    }
}

Ответ 4

Здесь супер простое решение jQuery для выравнивания всех элементов.

Я решил эту проблему, получив столбец с наивысшей высотой и установив эту высоту для всех остальных столбцов. Попробуйте снимок ниже.

setTimeout(function(){
  var maxHeight = 0;
  $('.item').each(function() {if ($(this).height() > maxHeight){maxHeight = $(this).height()}});
  $('.item').each(function() {$(this).height(maxHeight)});
}, 1000);

.item {
  border: 1px solid black;
}
.big {
  height:50px;
  background-color:fuchsia;
}
.normal {
  height:40px;
  background-color:aqua;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
	<div class="col-xs-4 item big">I am big</div>
	<div class="col-xs-4 item normal">I am normal</div>
	<div class="col-xs-4 item normal">I am normal</div>
	<div class="col-xs-4 item normal">I am normal</div>
	<div class="col-xs-4 item normal">I am normal</div>	
	<div class="col-xs-4 item normal">I am normal</div>
</div>

Ответ 5

Я думаю, вам нужно использовать clearfix. просто поместите класс clearfix в свой родительский элемент (в вашем случае, строка, я думаю) и поместим это в ваш css:

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Ответ 6

Я согласен с Skelly в том, что плагин для масонства, вероятно, подходит, но для быстрого легкого исправления вы можете просто создать новую строку каждый раз, когда вы хотите, чтобы что-то оставалось выровненным - это быстрый и грязный хак и может иметь некоторые проблемы с меньшими видовыми экранами.

Ответ 7

Мое решение: Я работал с видимыми классами бутстрапа 3

<div class="row">
<?php 
    $indexLg = 1;
    $indexSm = 1;
    foreach($contens as $content) {?>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="contents-block">
            <div class="image"><img href="<?php echo $content['image'];?>" />
            </div>
        </div>
    </div>
<?php
    if($indexLg%4 == 0) {
        $indexLg = 1;
        ?>
            <div class="clearfix visible-lg visible-md"></div>
        <?php
    } 
    if($indexSm%2 == 0) {
        $indexSm = 1;
        ?>
            <div class="clearfix visible-sm"></div>
        <?php
    }
    ?>
        <div class="clearfix visible-xs"></div>
    <?php
    }
} ?>