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

Question

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

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

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

这是网站：

score 1 · Accepted Answer

1

这是导致问题的.jumbotron和.footercss 规则margin-right: -20px;。

于 2013-04-02T12:08:30.593 回答

score 0 · Accepted Answer

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

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

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

希望这可以帮助。

score 0 · Accepted Answer

0

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

于 2013-04-02T12:04:32.110 回答

score 0 · Accepted Answer

0

试试这个：

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

于 2013-04-02T12:31:31.297 回答

4 回答 4