Использование контейнерной жидкости внутри бутстрапа вызывает горизонтальную полосу прокрутки

Вот простой пример:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">DUMMY CONTENT</div>
    </div>
</div>

Демо в скрипте

Когда я вижу результат в браузере, я получаю горизонтальную полосу прокрутки.

Почему это происходит?

Что я делаю неправильно?

Ответы

Ответ 1

container-fluid был первоначально выведен из Bootstrap 3.0, но добавлен в 3.1.1

Чтобы исправить это, вы можете:

Используйте более новую версию таблицы стилей Bootstrap

Демо с новым стилем в скрипте
Или добавьте в себя класс

.row добавляет маркер 15px влево и вправо. Поскольку .container-fluid заполняет ширину экрана 100%, дополнительное пространство поля вызывает проблемы с переполнением.

Чтобы исправить это, вам нужно добавить дополнение к .container-fluid class
```
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
```
Демо с пользовательским классом контейнера в Fiddle

Ответ 2

Я также столкнулся с этой проблемой. Я не знаю причину проблемы. Это может быть ошибка от Twitter Bootstrap. Теперь мне нужно вручную добавить тег overflow-x:hidden в мой тег body:

body { 
   overflow-x: hidden;
}

Jsfiddle

Ответ 3

В моем случае это исправление работало хорошо:

.row {
  margin-left: 0;
  margin-right: 0;
}

Ответ 4

.row{
margin: 0px;
}

быстро исправить это все, что вам нужно

Ответ 5

Обязательно инкапсулируйте классы строк в контейнеры.

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

Контейнер смещает поля -15 в строках с +15.

Ответ 6

С помощью Bootstrap 3.3.5 я получал горизонтальную полосу прокрутки на определенной ширине рядом с изменением размера экрана (md) до небольшого (см). Добавление div.row между моими div.container-fluid и div.container исправило это для меня.

<div class="container-fluid  myFullWidthStylingClass">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    #content
                </div>
            </div>
        </div>
    </div>
</div>

Добавление margin:0; к вашим строкам приведет к слому некоторых элементов стиля.

Ответ 7

В моем случае изменение @grid-gutter-width на нечетное число вызвало это, потому что:

mixins/grid.less

.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));
  padding-right: ceil((@gutter / 2));
  &:extend(.clearfix all);
}

Итак, если вы выберете нечетный gutter-width, тогда вы получите неровные прокладки, и вы увидите горизонтальную полосу прокрутки.

Ответ 8

Задайте max-width в классе контейнера вместо ширины. Он удалит горизонтальную полосу.

.container-fluid { 
    border:1px solid red;
    max-width:1349px;
    min-height:1356px;
    padding:0px;
    margin:0px; 
}

Ответ 9

Вы можете грязно взломать строку, добавив новый класс в строку полной ширины и создать файл crrrrrite css:

.noLRMar{
  margin-right: 0 !important;
  margin-left: 0 !important;
 }

<div class="row noLRMar">
  
 </div>