2015-08-05 3 views
1

Итак, я пришел accros this site, объясняющий функционирование Bootstrap и их расположение сетки.Когда будет использоваться «row» в Bootstrap

Их объяснения, что вы должны использовать row в container и col-... в row, но то, что я не знаю И не особенно получаю: Должен ли я использовать два row в том же container если цв -... управляем их самих?

Я Явные: У вас есть эта ↓

<div class="container"> <!-- First Case --> 
    <div class="row"> 
     <div class="col-xs-6">col-xs-6</div> 
     <div class="col-xs-6">col-xs-6</div> 
     <div class="col-xs-6">col-xs-6</div> 
     <div class="col-xs-6">col-xs-6</div> 
    </div> 
</div> 

<div class="container"> <!-- Second Case --> 
    <div class="row"> 
     <div class="col-xs-6">col-xs-6</div> 
     <div class="col-xs-6">col-xs-6</div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-6">col-xs-6</div> 
     <div class="col-xs-6">col-xs-6</div> 
    </div> 
</div> 

Это совершенно другая по-прежнему; он делает то же самое точный способ ..

Вы можете увидеть результат там: Fiddle

Итак: Какой путь должен я предпочитаю/использовать? и Есть ли разница?

+0

Посмотрите: http://getbootstrap.com/css/#grid – Ioan

+2

Элементы '.row' очищают любые поплавки для одного. Взгляните на свою скрипку, когда один столбец имеет большую высоту, чем другие: https://jsfiddle.net/DTcHh/10737/ – George

ответ

4

Важно понимать, что .rowочищает плавающие столбцы внутри, которые вы хотите в случае, если вы не имеете полный контроль высоты ваших содержащихся колонн.

Смотрите эту обновленная скрипка вашего, чтобы понять, почему второй пример вы дали это уборщик путь:

https://jsfiddle.net/DTcHh/10739/

Edit: Следует отметить, что использование дополнительного ряда имеет резкий недостаток: Вы больше не могут решить, хотите ли вы видеть больше столбцов рядом друг с другом в более высоких разрешениях.

+0

Хорошо, так исправьте меня, если я ошибаюсь: в конце концов я мог бы использовать первый случай (единственный ' row'), если я хочу сделать умное и хорошо продуманное позиционирование, но его хитрое ** и ** я должен предпочесть второй способ, если я хочу что-то чистое? –

0

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

Найти это обновление Fiddle.

<div class="container"> 

     <div class="row"> 
     <!-- free flow under this row --> 
     <div class="col-xs-6">col-xs-6</div> 
     <div class="col-xs-6">col-xs-6</div> 
     <div class="col-xs-6">col-xs-6</div> 
     <div class="col-xs-6">col-xs-6</div> 
     <div class="col-xs-6">col-xs-6</div> 
     <div class="col-xs-6">col-xs-6</div> 
    </div> 
</div> 
Смежные вопросы