Щебет загрузочного белого пробела в правой части страницы

Ответ 1

Это может быть немного поздно, но я нашел, что другие ответы вводят в заблуждение.

Верно, что класс строки является тем, что вызывает проблему, но это потому, что она всегда должна быть помещена внутри элемента контейнера.

из http://getbootstrap.com/css/:

Строки должны быть размещены внутри контейнера (фиксированной ширины) или жидкости-контейнера (полная ширина) для правильного выравнивания и заполнения.

Элемент контейнера обычно имеет отступы -15px справа и слева, а класс строк имеет 15px отступы справа и слева. Оба отменяют друг друга. Если одного из двух нет, вы увидите дополнительное пространство.

Ответ 2

Вы пробовали:

html, body { overflow-x: hidden; }

Можете ли вы опубликовать скрипку?

Ответ 3

Добавьте в свой HTML-код следующий метатег

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />

Также попробуйте установить

html, body. div{
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

на html и body

Ответ 4

У меня такая же проблема. Я обнаружил, что объектом, вызывающим создание дополнения, был класс "строка" Bootstrap.

Если вы добавите

.row {
  padding-right: 0px;
  margin-right: 0px;
}

в ваши файлы CSS/строки, это должно исправить хотя бы один из элементов, вызывающих добавление на вашей странице.

Ответ 5

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

Ответ 6

Недавно у меня была очень похожая проблема, и мне потребовалось некоторое время, чтобы разобраться. Для меня это не было обычной проблемой строки/контейнера. Я использовал form-control для визуализации флажков вручную. В Bootstrap все текстовые элементы с form-control имеют width:100% по умолчанию width:100%. Наличие большого количества флажков в сети приводило к их перетеканию (незаметно) и вызывало большой пробел справа. Удивительно, но отладку этого с помощью инструментов Chrome Dev также было нелегко.

Теперь я использую следующее решение, чтобы установить width на auto; (этот ответ помог):

<input class="form-control form-control-inline" type="checkbox"........ />

а также

.form-control-inline {
  width: auto;
}

Надеюсь, это поможет кому-то

Ответ 7

Также проверьте, как вы используете контейнеры. Они не могут быть вложенными, они вызовут проблемы.

Вы можете выбрать один из двух контейнеров для использования в ваших проектах. Обратите внимание, что из-за заполнения и более, ни один контейнер не может быть установлен.

Источник: http://getbootstrap.com/css/#overview-container

Ответ 8

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

Ответ 9

У меня была похожая проблема на мобильных устройствах. Проблема была в том, что я спрятал элемент на экранах меньшего размера, но забыл его родительский контейнер. Этот контейнер все еще обрабатывался, хотя его содержимое было пустым, что приводило к большому белому промежутку на правильном сайте. Сокрытие родительского элемента вместо ребенка решило это для меня.

Ответ 10

У меня была эта проблема, никто из ответов не помог мне, я решил свою проблему следующим образом:

body { overflow-x: hidden; width: 100vw;}