Question

我正在使用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时，我会更新这个问题。

Answer 1

你应该试试这些：

升级您正在使用的firefox版本。
从浏览器中删除Cookie。
安装firebug和开发人员工具栏以检查页面，问题可能在.css中。通过删除一些属性，在firebug中检查它。

Answer 2

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

响应式Bootstrap站点无法正常工作，跨度不会随着屏幕变窄而崩溃。即使官方的Bootstrap网站似乎也无法正常工作。

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

祝你好运！

Answer 3

您需要添加：

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

之前

<div class="row"></div>

Answer 4

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

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

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

Answer 5

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

table {table-layout:fixed}

它解决了Firefox和Linux中的问题IE，带有bootstrap 2＆amp; 3

Firefox Bootstrap响应式布局中断

5 个答案: