Букстрап 3 сетки, динамически создаваемые столбцы не очищаются правильно

Я пытаюсь создать макет сетки bootstrap (v3.0.3). Данные динамически генерируются с помощью следующего кода:

<div class="row">
    @foreach (var Node in Model.Tour.Nodes)
    {
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="thumbnail">
                @Node.SomeData
            </div>
        </div>
    }
</div>

К сожалению, иногда столбцы не очищаются, так как один выше другого, и я получаю что-то вроде этого:

Я знаю, что есть способ исправить это, добавив класс clearfix, где должна начинаться новая строка:

<div class="clearfix visible-xx"></div>

Но я не могу этого сделать, когда контент динамически генерируется.

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

Ответ 1

Я не могу этого сделать, когда контент динамически генерируется.

РЕДАКТИРОВАТЬ 4/29/2016

Последнее решение: http://jsfiddle.net/silb3r/3hzmwbt0/

Первое решение (еще ниже) в значительной степени зависит от изменения вашей разметки HTML. Это нежелательно, потому что: (1) это не семантический; (2) пустые элементы невелики; и (3) это повлияет на вашу способность эффективно использовать селектор nth-child в ваших столбцах.

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

Последнее решение нацеливает и очищает левую сторону столбцов при различных ширинах видовых экранов.

Используя этот синтаксис: nth-child( a n + b )

a = количество столбцов, отображаемых в этом окне просмотра

b = a + 1

END EDIT

Конечно, вы можете! Вам нужно будет отслеживать количество миниатюр и выводить другое clearfix соответственно. В вашем примере вам понадобится:

<div class="clearfix visible-sm-block"></div> после каждых двух столбцов эскизов
<div class="clearfix visible-md-block"></div> после каждых трех столбцов эскизов
<div class="clearfix visible-lg-block"></div> после каждых четырех столбцов эскизов

Вы должны иметь возможность создать индексную переменную, установленную в 0, и повторять ее каждый раз в вашем цикле, используя оператор modulo для вывода правильного clearfix.

Вы можете определенно объединить классы видимости, когда после этого эскиза столбца, как я сделал в этом рабочем примере, появляется несколько clearfixes: http://jsfiddle.net/silb3r/jtg7sn9z/.

Edit Обновлен рабочий пример (http://jsfiddle.net/silb3r/jtg7sn9z/1/) и приведенный ниже код, чтобы отразить новые классы видимости Bootstrap, которые теперь включают коробку.

Пример:

<div class="row">
  @for(var i = 0; i < Model.Tour.Nodes.Length; i++) {
    var Node = Model.Tour.Nodes[0];
    if(i % 2 == 0) {
      <div class="clearfix visible-sm-block"></div>
    }
    if(i % 3 == 0) {
      <div class="clearfix visible-md-block"></div>
    }
    if(i % 4 == 0) {
      <div class="clearfix visible-lg-block"></div>
    }
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="thumbnail">
        @Node.SomeData
      </div>
    </div>
  }
</div>

Ответ 2

.row > div.col:nth-of-type(3n+1) {
    clear: both;
}

Ответ 3

Вы можете использовать следующий CSS:

.row > div.col:nth-of-type(even) {
  clear: both;
}

Ссылка: http://www.w3schools.com/cssref/sel_nth-of-type.asp

Ответ 4

Если вы решите использовать nth-of-type, вы можете комбинировать те, которые имеют медиа-запросы, чтобы очистить соответствующие столбцы при разных ширинах видовых экранов.

Ответ 5

Для углового JS ng-повтора я использовал следующее:

<div class="row">
<div data-ng-repeat="node in Model.Tour.Nodes track by $index">
    <div data-ng-if="$index != 0 && $index % 2 == 0" class="clearfix visible-sm-block"></div>
    <div data-ng-if="$index != 0 && $index % 3 == 0" class="clearfix visible-md-block"></div>
    <div data-ng-if="$index != 0 && $index % 4 == 0" class="clearfix visible-lg-block"></div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
            {{node.SomeData}}
        </div>
    </div>
</div>