Как предотвратить горизонтальную прокрутку на отзывчивой веб-странице?

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

Я считаю, что это связано с контейнером img, который я включаю, но меня здесь нет. Страница html находится здесь: http://pastebin.ca/2347946.

Любые советы о том, как предотвратить горизонтальную прокрутку страницы, сохраняя при этом прокрутку в контейнере img?

Ответ 1

Я уверен, что где-то один из ваших дочерних элементов превышает ширину его родительского элемента. Проверьте код дважды, если размер внутренних дочерних элементов большого размера из-за одной из причин, например, когда ширина окна, включая margin, padding, border, выходит за пределы. И мы, возможно, не добавили overflow: hidden; к своему внешнему родительскому элементу. В этом случае они считаются выходящими за пределы их родительского элемента, а браузеры показывают его с помощью полосы прокрутки. Поэтому исправьте его, удалив дополнительные поля, прокладки, границы или если вы просто не хотите головной боли, просто попробуйте добавить overflow:hidden; во внешнюю рамку.

Ответ 2

У меня была такая же проблема, и я применил ее для исправления:

body {
    overflow-x: hidden !important;
}
.container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

Чтобы немного развернуть, у меня была проблема только на мобильных телефонах, поэтому это мой последний код:

@media screen and (max-width: 667px) {
    body {
        overflow-x: hidden !important;
    }
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

Я нашел проблемы, связанные с этим в Github, поэтому я предполагаю, что новые версии Bootstrap были исправлены.

Ответ 3

Попробуйте добавить (в соответствующем @-rule) a max-width:

img {
    max-width: NNNpx;
}

Это предотвратит слишком большую ширину img.

Ответ 4

"Переполнение: скрыто"; стиль - это средство не профилактика. Если вы хотите предотвратить это, вы должны проверить свои элементы тела, которые больше, чем тело. Это происходит, когда вы берете div с некоторым "дополнением" или "маржированием" за пределами класса ".container" (twitter bootstrap). Так что удалите все дополнения и поля вне класса контейнера.