Bootstrap 3 - Почему класс row шире своего контейнера?

Я только начал использовать bootstrap 3 Мне трудно найти время понять, как работает класс строк. Есть ли способ избежать заполнения - слева и отступов - правильно?

<div class="row" style="background:#000000">           
<div class="col-xs-4 .col-xs-offset-1">
  col
</div>
<div class="col-xs-2">
  col
</div>
<div class="col-xs-2">
  col
</div>
<div class="col-xs-2">
  col
</div>
</div>

http://jsfiddle.net/petran/rdRpx/

Ответ 1

Во всех сетчатых системах между каждым столбцом расположены желоба. Система Bootstrap устанавливает 15px padding как слева, так и справа от каждого столбца для создания этого желоба.

Проблема в том, что первый столбец не должен иметь половину желоба слева, а последний не должен иметь половину желоба справа. Вместо того, чтобы использовать какой-то класс .first или .last для этих столбцов, как это делают некоторые системные системы, вместо этого они устанавливают класс .row для отрицательных полей, которые соответствуют заполнению столбцов. Это "тянет" сточные канавы от первого и последнего столбцов, в то же время делая его более широким.

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

UPDATE:

Вы изменили свой вопрос после ответа, так что вот ответ на вопрос, который вы сейчас задаете: добавьте класс .container в первый <div>. См. рабочий пример.

Ответ 2

См. мой ответ ниже на аналогичную запись.

Почему у bootstrap.row есть значение по умолчанию - слева от -30px?

В основном вы используете "clearfix" вместо "row". Он выполняет то же самое, что и "строка", за исключением отрицательного поля.

Ответ 3

С бутстрапом 3.3.7 эта проблема решена, завершая перенос .row с .container-fluid.

Ответ 4

Я использовал класс строк внутри класса контейнера и все еще имел некоторые проблемы. Когда я добавил margin-left: auto; margin-right: auto; в класс .row, он работал нормально.

Ответ 5

Для будущих разработчиков, отлаживающих эту проблему:

Bootstrap устанавливает заполнение для столбцов строк, поэтому ни одно содержимое содержимого не должно появляться вне контейнера. Если вы столкнулись с этим, и вы правильно используете системную сетку bootstrap, используя классы col..., вероятно, у вас есть дополнительный CSS, где-то сбрасывается заполнение столбцов.