Row в col или наоборот?

Question

[Илья Пирожок]

Иногда работает по разному и путает немного. Как все таки правильно располагать последовательность элементов? Допустим шапка сайта: header>container>row>col-md-12 или как?
И нужно ли в каждой секции указывать заново container>row, например:
header>top-line>container>row>col-md-12
header>bottom-line>container>row>col-md-12 ?
Понимаю что можно читать документацию но всё же немного не понимаю.

Answer 1

[Дима Паутов]

Вообще правильно так

<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="top-line">

</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="bottom-line">

</div>
</div>
</div>
</div>
</header>

Проще мне кажется понять, это глянуть на таблицы. Ибо принцип тот же

<header>
<table>
<tr>
<td>
<div class="top-line">

</div>
</td>
</tr>
<tr>
<td>
<div class="bottom-line">

</div>
</td>
</tr>
</table>
</header>

Но использовав 1й пример, то для вложенных в блок .top-line или .bottom-line строк нужно писать так:

<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="top-line">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="bottom-line">
<div class="top-line">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>

Нет смысла еще раз вложенный контент оборачивать в блок .container

Comments

[Илья Пирожок]

Спасибо!

[Roman K]

Я бы не сказал, что верстать без отступов правильно.

[Дима Паутов]

Roman Kitaev: каких отступов?

[Roman K]

Дима Турков: lmgtfy.com/?q=%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF...

Answer 2

[Механик]

Ответ кроется в деталях. У каждого col есть padding по 15px с каждой стороны. У row же есть marginы по -15px с каждой стороны.

В итоге эта конструкция призвана

• Группировать colы
  
• Убирать лишние отступы
  

На примере Вашей конструкции:

<div class="header">
	<div class="top-line">
		<div class="container"> <!-- Дает padding 15px слева/справа -->
			<div class="row"> <!-- Убирает отступы предыдущего класса -->
				<div class="col-md-12"> <!-- Дает padding 15px слева/справа -->
					<p>Какой-то контент</p>
				</div>
			</div>
		</div>
	</div>
</div>

Без row в Вашей конструкции padding был бы по 30px с каждой стороны.

Но если у Вас в col-md-12 будут еще, например

<div class="col-md-6"></div>
<div class="col-md-6"></div>

то лучше их обернуть в row, чтобы убрать лишний отступ, который нам дает col-md-12.

Поэтому "Что пень пнем, что Пнемпень" - может быть как .row>.col-*, так и .col-*>.row (но скорее всего будет .row>.col-*>.row>.col-*)