2

我正在使用 Twitter Bootstrap 创建一个响应式布局，但它似乎在第一页加载时在 Firefox 中中断，但过了一段时间没有刷新页面，它似乎工作正常。

我什至尝试将页面剥离为一个基本示例，但它仍然无法正常工作，这是我的代码：

<!DOCTYPE html>
<html>

<head>
    <title>Hello</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">


</head>

<body>

<div class="container">

<div class="row">
    <div class="span8">
        <h3>Main content</h3>
        <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
        <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    </div>
    <div class="span4">
        <h4>Sidebar</h4>
        <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    </div>
</div>

</div>

</body>

</html>

更新：

这个问题实际上只出现在我的机器上。我已经在其他三个上进行了测试，效果很好。也许我安装的 Firefox 有问题？我使用的是 Mac，OSX 10.6.8。当我尝试重新安装 Firefox 时，我会更新这个问题。

4

5 回答 5

2

你应该尝试这些事情：

  1. 升级您正在使用的 Firefox 版本。

  2. 从您的浏览器中删除 cookie。

  3. 安装 firebug 和开发者工具栏来检查页面，问题可能出在.css. 通过删除一些属性在萤火虫中检查它。

于 2012-07-06T10:12:45.340 回答
2

我也遇到过这种情况，目前使用的是 Firefox 17.01 和 Mac OSX 10.8.2

响应式引导站点无法正常工作，跨度不会随着屏幕变窄而折叠。甚至官方的 Bootstrap 站点似乎也无法正常工作。

我认为这可能是由某些 Firefox 扩展引起的。不确定是哪一个，但如果我在同一台机器上切换到不同的用户，一个没有安装 FF 扩展的用户，问题就会消失。

祝你好运！

于 2012-12-17T02:15:47.863 回答
0

您需要添加：

<div class="container">...</div>

之前

<div class="row"></div>
于 2012-07-06T08:28:32.910 回答
-2

我通过为问题视口宽度创建仅针对 Firefox 的特殊 CSS 媒体查询来解决此问题。

@-moz-document url-prefix() {
@media (min-width: 980px) and (max-width: 1199px) {
    .span1 {
      width: 129.14px;
    }
}
}

注意我在这里使用自定义网格，每行（.row）只有 7 列（.span1's）。如果您使用的是标准的 12 列，那么宽度会有所不同，但您可以使用相同的方法来修复它。

于 2013-04-22T10:01:14.727 回答
-3

我在互联网的某个地方找到了解决方案......

table {table-layout:fixed}

它使用引导程序 2 和 3 解决了 Firefox 和 IE 中的问题

于 2013-08-28T08:35:57.683 回答