Несколько строк в строке в Twitter Загрузочный

Я работаю над проектом, для которого я использую Bootstrap 2.2.2. Из-за своей природы было бы наиболее удобно НЕ закрыть строку каждые 12 столбцов, то есть:

<div>
 <div>
 <div>content</div>
 <div>content</div>
 <div>content</div>
 <div>content</div>
 <div>content</div>
 <div>content</div>
 <div>content</div>
 (...)
 </div>
</div>

Есть ли у этого метода какие-то недостатки? Пока во время тестирования я не обнаружил проблем с таким макетом в Chrome, Firefox или IE 9. Однако, если есть какие-либо проблемы, о которых вы знаете, я буду признателен за любую информацию (особенно если она нарушит макет для любого более старого браузеров, хотя меня не волнует IE7 или старше).

2 ответа

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

Для примера см. вторую строку на http://jsfiddle.net/panchroma/czxJB/.

Однако это может быть преодолено с помощью некоторых пользовательских CSS. См. Результаты третьей строки, которая добавляет этот дополнительный CSS к

.row.multiple .span4:nth-child(3n+4) { 
clear:left;
}

Удачи!


Отличный ответ от Дэвида! Это мой css, полученный из ответа и расширенный для всех возможных строк/интервалов, надеюсь, что это поможет

.row.multiple .span6:nth-child(2n+3), .row-fluid.multiple .span6:nth-child(2n+3) { 
 clear:left;
 margin-left: 0px;
}
.row.multiple .span4:nth-child(3n+4), .row-fluid.multiple .span4:nth-child(3n+4) { 
 clear:left;
 margin-left: 0px;
}
.row.multiple .span3:nth-child(4n+5), .row-fluid.multiple .span3:nth-child(4n+5) { 
 clear:left;
 margin-left: 0px;
}
.row.multiple .span2:nth-child(6n+7), .row-fluid.multiple .span2:nth-child(6n+7) { 
 clear:left;
 margin-left: 0px;
}

licensed under cc by-sa 3.0 with attribution.