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

116

Я только начал использовать Bootstrap 3. Мне трудно понять, как работает класс строк. Есть ли способ избежать 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/

twitter-bootstrap twitter-bootstrap-3 Petran
источник

@Adrift, это все еще правда? Я не уверен, имеете ли вы в виду, что они работают неправильно, потому что я их использовал, и они, кажется, работают так, как должны.

Cereal

1

@Cereal: Больше нет. Это был добавлен в v3.0.2

ADRIFT

3

потому что строка начальной загрузки имеет левое и правое поля -15 пикселей.

Вероятно, это не ваша проблема, но для всех, у кого есть проблема того же типа: убедитесь, что у вас есть только один атрибут класса в ваших div. Я случайно сложил их вдвое и получил ту же проблему.

The One True Colter

151

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

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

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

ОБНОВИТЬ:

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

Шон Райан
источник

2

Столбцы сетки разделяются отступами, а не полями (в BS3)

adrift

3

Большой! Это объясняет весь переполненный контент.

Rutwick Gangurde

27

В bootstrap 3.3.7 эта проблема решена путем обертывания .row с помощью .container-fluid.

dbarma
источник

это сработало для меня, хотя сначала я думал, что это не так, потому что у меня была открыта веб-консоль разработчика, которая уменьшает ширину, но, видимо, также портит это. Здесь .container-fluidтакже было предложено использовать: stackoverflow.com/a/23616447/5272567

Маттиас

тоже работает, когда обертывающий div имеет позицию absolute. спасибо за подсказку

InsOp 04

если бы я мог проголосовать за этот ответ несколько раз ... :)

rony36

То же исправление для Bootstrap 4.

Роб Л.

19

См. Мой ответ на похожее сообщение ниже.

Почему у bootstrap .row левое поле по умолчанию составляет -30 пикселей?

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

рукав моря
источник

2

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

Тодд Баур,

Это решает проблему переполнения содержимого за пределами оболочки.

Бходжендра Раунияр

Но лучше обернуть ряд контейнером.

Бходжендра Раунияр

BEST ASWER! UP!

Андерсон Брессан

18

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

Джеффри
источник

8

Это сработало как шарм! Добавление класса mx-auto в bootstrap 4 устранило для меня проблему переполнения.

Мишель М.

3

@Michelle M. должна получить полную оценку этого ответа.
Она сказала в одном из комментариев:

Добавление класса mx-auto в bootstrap 4 устранило для меня проблему переполнения.

Вам нужно будет обновить свой первый divэлемент следующим образом:

<div class="row mx-auto" style="background:#000000">

Нет необходимости делать это для всех вложенных строк (если они у вас есть).
Просто добавьте mx-autoк самым внешним row(или рядам), чтобы избежать вертикальной полосы прокрутки.
Не переопределяйте поведение всех строк Bootstrap, добавляя класс «row» для замены полей.

MikeTeeVee
источник

1

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

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

JSideris
источник

Или у вас старая версия Bootstrap. Например, 3.0.0 распространяется с VS2015. См. Github.com/twbs/bootstrap/issues/8959

Приключение,

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

Ответы: