Twitter Bootstrap 3.0 строка шире окна

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

Вот пример

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

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

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

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

4 25
css twitter-bootstrap

4 ответа:

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

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

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

6

EDIT > >

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

Редактировать

Это ошибка

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

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

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

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

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

5

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

Например 

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