Горизонтальная проблема с прокруткой

Question

Я закончил кодировку this website, используя бутстрап, и теперь у меня есть эта проблема относительно горизонтальной прокрутки, которая не должна была произойти. Это мой первый сайт с использованием boostrap.

Я попытался использовать 'divide et impera', удалив фрагменты кода, чтобы найти проблему. Горизонтальная прокрутка исчезла, когда я удалил почти весь контент/веб-сайт, поэтому я полагаю, что это связано с основным контейнером?

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

Answer 1

Не взять что-нибудь подальше от @Tulio Кастро, как положить overflow-x: hidden; на body следует исправить это. Однако это хакерское исправление заключается в том, что оно не исправляет проблему, а скорее фиксирует видимое в настоящее время следствие проблемы. Я подумал, что вы, возможно, захотите узнать реальную проблему - почему это происходит и что вы можете сделать лучше.

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

Так вот исправления:

Вы можете запустить эту JQuery, когда горизонтальная полоса прокрутки видна, и она расскажет вам, какие элементы вызывают переполнение:

$('*').filter(function() { return $(this).width() > $('body').width(); }); 

В вашем случае, вернет трех преступников, все из них .row элементов:

1) Первый .row должен быть вложен в элемент .col-xs-12. У вас не может быть .row как непосредственный ребенок элемента .row в начальной загрузке.

2) Второй .row имеет родителя с классом .partneri. Вы применили пользовательский CSS к этому родительскому элементу, который разбил бутстрап. В этом случае самозагрузки хотел 10px отступа справа и слева, но ваш CSS принял это далеко:

.parteneri 
{ 
    .... 
    padding: 10px 0 10px 0; 
} 

Изменить это в

.parteneri 
{ 
    .... 
    padding: 10px; 
} 

И вы должны быть хорошо.

3) Третий .row имеет то же самое. Родитель с классом .sub-footer разбивает пробелы бутстрапа. Изменение

.sub-footer 
{ 
    border-top: 2px solid #f8f8f8; 
    padding: 10px 0 4px 0; 
} 

в

.sub-footer 
{ 
    border-top: 2px solid #f8f8f8; 
    padding: 10px 10px 4px 10px; 
} 

И вы установлены. Удачи.

Answer 2

Я видел это горизонтальная полосу прокрутки в Apple Iphone 4, просто решить эту проблему, просто определить thiss CSS:

html,body{ 
    overflow-x:hidden; 
} 

Надеется, что это помогает