水平滚动问题

Question

我使用 bootstrap 完成了 this website 的编码，现在我遇到了关于水平滚动的问题，这本不应该发生。这是我第一个使用 boostrap 的网站。

我尝试通过删除代码片段来使用 'divide et impera' 来查找问题。当我删除几乎整个内容/网站时，水平滚动消失了，所以我想它与主容器有关？

我好像想不通，这几个小时一直在用头撞墙。

Answer 1

我在apple看到这个水平滚动iphone 4，解决这个问题，定义这个css:

html,body{
    overflow-x:hidden;
 }

希望对您有所帮助

Answer 2

不要从@Tulio Castro 拿走任何东西，因为将 overflow-x: hidden; 放在 body 上应该可以解决这个问题。然而，这是一个 hacky 修复，因为它并没有修复问题本身，而是修复了该问题当前可见的后果。我想您可能想知道实际问题 - 为什么会发生这种情况以及您可以做些什么。

首先让我说 bootstrap 是一个微妙的系统：每次应用自己的样式时，您都需要检查以确保您的样式不会与 bootstrap 冲突的。

修复如下：

当水平滚动条可见时，您可以运行这个jQuery，它会告诉您哪些元素导致溢出：

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

在你的情况下，它将 return 三个罪魁祸首，所有这些都是 .row 个元素：

1) 第一个.row需要嵌套在一个.col-xs-12元素中。您不能将 .row 作为 bootstrap.

中 .row 元素的直接子元素

2) 第二个 .row 的父级 class .partneri。您将自定义 CSS 应用于此父元素，这破坏了 bootstrap。在这种情况下，bootstrap 想要左右各有 10px 的内边距，但你的 CSS 把它拿走了：

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

将此更改为

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

你应该没事的。

3) 第三个.row也一样。 class .sub-footer 的父级打破了 bootstrap 的填充。变化

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

至

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

大功告成。祝你好运。

水平滚动问题

Horizontal scroll issue

html

css

horizontal-scrolling

twitter-bootstrap