以小分辨率查看时，响应式网站上的额外水平宽度

Question

我已经使用Twitter Bootstrap创建了一个响应式网站，但是当我以320x480的屏幕分辨率查看该网站时，会出现一个水平滚动条，因为该网站似乎有额外的20px-30px宽度。您可以通过水平向右滚动来看到这一点。

我已经检查了构成页面的元素，但是我无法弄清楚导致这个额外宽度的原因 - 理想情况下我不希望在320x480分辨率下进行任何水平滚动。

您可以在检查元素后将Google Chrome中的分辨率更改为320x480来查看问题。

这是网站：

http://www.bestcastleintown.co.uk/wp/

Answer 1

导致此问题的是.jumbotron和.footer css规则margin-right: -20px;。

Answer 2

您是否启用了Bootstrap的响应功能？

http://twitter.github.com/bootstrap/scaffolding.html#responsive

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

请注意，必须在您的网站上包含并引用bootstrap-responsive.css

希望这有帮助。

Answer 3

您可以尝试将页眉和页脚标记的横向边距从-20px重置为0

Answer 4

试试这个：

.footer{
     width: 85%;
     margin: 0 auto;
     /* other css properties */
}