Twitter Bootstrap 3.0 больше ширины окна

Я играл с Twitter Bootstrap и заметил, что мой .row был шире, чем длина экрана.

Вот пример

Когда вышел bootstrap 3.0, я не испытал этого.

Дополнительное пространство с правой стороны происходит от margin-right: -15px;

Я часами смотрел на это, не делая каких-либо успехов в том, почему и как я обманываю себя, и поиск не помог.

Я уверен, что мне не хватает очевидного. Я хотел бы понять, почему это пространство за шириной окна (заставляя скроллер) и как его избежать. Я думал, что строка будет соответствовать 100%

Ответы

Ответ 1

Правильное решение (https://getbootstrap.com/docs/3.3/css/#grid-example-fluid) заключается в использовании класса container-fluid в окружающем div:

<div class="container-fluid">
  <div class="row">
    Content
  </div>
</div>

Ответ 2

Я исправил его, просто удалив margin-left и margin-right из .row в bootstrap, а также установив его ширину на 100%

Ответ 3

ИЗМЕНИТЬ →

Это был ранее принятый ответ. Undeleted, если есть сайты со старой версией.

EDIT <

Это ошибка

Который, кажется, был незафиксирован пока. Возможно, правильное исправление в 3.1.

Лучшее предложение кажется "overflow-x: hidden на body.

https://github.com/twbs/bootstrap/issues/10711

Кроме того, они добавили/уточнили некоторые из них в этом commit

Особенно эта строка "Люди, которые хотят создать полностью жидкие макеты (то есть ваш сайт растягивает всю ширину окна просмотра), должны обернуть содержимое сетки в содержащем элементе с помощью padding: 0 15px; для смещения margin: 0 -15px;, используемого в .row"

Ответ 4

Ваши строки должны быть помещены внутри div с применяемым классом контейнера.

Например

<div class="container">
    <div class="row">
        Content
    </div>
</div>