Столбы колонн бутстрапа с разной высотой

Динамически я создаю набор ящиков с немного другой высотой и хочу отображать 2, 3 или 4 из них (в зависимости от размера экрана) в той же строке. Я пробовал следующую разметку с помощью бутстрапа:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-xs-6">
      Two<br>Lines
    </div>
    <div class="col-xs-6">
      Two<br>Lines
    </div>
    <div class="col-xs-6" style="background-color: red">
      Three<br>Lines<br>Jup
    </div>
    <div class="col-xs-6">
      Two<br>Lines
    </div>
    <div class="col-xs-6">
      Two<br>Lines
    </div>
    <div class="col-xs-6">
      Two<br>Lines
    </div>
  </div>
</div>

Моя проблема - это пространство ниже моей третьей колонки.

enter image description here

 A  B
 C  D
 C  E <- Should wrap to next row, because of C
 F  G

Можете ли вы сказать, как достичь этого? Я признал совет использовать clearfix, но я предполагаю, что эта попытка вызовет проблемы и уродливый код при использовании другого количества столбцов.

Спасибо за ваши ответы.

Ответы

Ответ 1

Проблема

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

От MDN по поплавкам:

когда элемент перемещается, он вынимается из нормального потока документа. Он сдвигается влево или вправо, пока он не коснется края его содержащего окна или другого плавающего элемента.

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

К счастью, есть много способов исправить это до ожидаемого поведения:

screenshot

Использование свойства CSS Clear

Из MDN on Clear:

Явное свойство CSS указывает, может ли элемент быть рядом с плавающими элементами, которые предшествуют ему или должны быть перемещены вниз (очищены) ниже них

Для этой точной структуры вы можете применить clear к каждой другой строке с помощью селектора nth-child:

.col-xs-6:nth-child(odd) {
    clear: both;
}

Примечание: селектор nth-child не будет работать в IE8

Демо в jsFiddle/Фрагменты стека:

.col-xs-6:nth-child(odd) {
  clear: left;
}
.col-xs-6 {
  border: 1px solid grey;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6 label-warning">
      Three<br/>
      Lines<br/>
      Jump
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
    <div class="col-xs-6">
      Two<br/>
      Lines
    </div>
  </div>
</div>