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

Я только начал использовать Bootstrap 3. У меня сейчас трудное время. понимание того, как работает класс row. Есть ли способ избежать padding-left и padding-right?

<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/

5 ответов


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

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

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

обновление:

вы изменили свой вопрос после того, как я ответил, Поэтому вот ответ на вопрос, который вы сейчас задаете: добавьте .container класс "первый"!--5-->. См.пример работающего.


см. Мой ответ ниже на аналогичный пост.

почему бутстрап .строка имеет поле по умолчанию слева от-30px?

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


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


с bootstrap 3.3.7 эта проблема решается обертыванием .грести .контейнер-жидкость.


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

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