У меня проблема с моей отзывчивой таблицей стилей с Twitter Bootstrap. Сайт отлично выглядит без проблем, но по какой-либо причине отзывчивый планшет и телефон имеют этот огромный белый пробел справа от страницы. Его не полоса прокрутки выдает огромную белую щель
http://i.imgur.com/JeRRRqq.png
Я не верю, что я вообще изменился. Ничего с шириной и ничем. Проверял объекты в Chrome и не мог видеть ничего переполненного по ширине мудрый
Это может быть немного поздно, но я нашел, что другие ответы вводят в заблуждение.
Верно, что класс строки является тем, что вызывает проблему, но это потому, что она всегда должна быть помещена внутри элемента контейнера.
из http://getbootstrap.com/css/:
Строки должны быть размещены внутри контейнера (фиксированной ширины) или жидкости-контейнера (полная ширина) для правильного выравнивания и заполнения.
Элемент контейнера обычно имеет отступы -15px справа и слева, а класс строк имеет 15px отступы справа и слева. Оба отменяют друг друга. Если одного из двух нет, вы увидите дополнительное пространство.
Вы пробовали:
html, body { overflow-x: hidden; }
Можете ли вы опубликовать скрипку?
Добавьте в свой 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
У меня такая же проблема. Я обнаружил, что объектом, вызывающим создание дополнения, был класс "строка" Bootstrap.
Если вы добавите
.row {
padding-right: 0px;
margin-right: 0px;
}
в ваши файлы CSS/строки, это должно исправить хотя бы один из элементов, вызывающих добавление на вашей странице.
Как правило, это происходит из-за того, что у вас есть div, нарушающий границы ширины вашего набора контейнеров, может быть заполнением div или разделами, маржи, позиционированием. Вы можете использовать стрелку или переполнение инспектора: скрытые в теге контейнера, чтобы увидеть, что вы можете сломать ширину.
Недавно у меня была очень похожая проблема, и мне потребовалось некоторое время, чтобы разобраться. Для меня это не было обычной проблемой строки/контейнера. Я использовал 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;
}
Надеюсь, это поможет кому-то
Также проверьте, как вы используете контейнеры. Они не могут быть вложенными, они вызовут проблемы.
Вы можете выбрать один из двух контейнеров для использования в ваших проектах. Обратите внимание, что из-за заполнения и более, ни один контейнер не может быть установлен.
У меня была очень похожая проблема, и, проведя некоторое время, я понял, что я применил стилизацию CSS, добавляя дополнение 0px как слева, так и справа от класса контейнера-жидкости, и поэтому стиль изменил значение по умолчанию -15px необходимо на контейнерной жидкости, чтобы держать ряды в их надлежащем месте.
У меня была похожая проблема на мобильных устройствах. Проблема была в том, что я спрятал элемент на экранах меньшего размера, но забыл его родительский контейнер. Этот контейнер все еще обрабатывался, хотя его содержимое было пустым, что приводило к большому белому промежутку на правильном сайте. Сокрытие родительского элемента вместо ребенка решило это для меня.
У меня была эта проблема, никто из ответов не помог мне, я решил свою проблему следующим образом:
body { overflow-x: hidden; width: 100vw;}