Twitter Bootstrap 响应式布局在 Firefox 中中断答案

【问题标题】：Twitter Bootstrap Responsive Layout breaks in FirefoxTwitter Bootstrap 响应式布局在 Firefox 中中断
【发布时间】：2012-07-06 16:44:14
【问题描述】：

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

【问题讨论】：

您面临什么问题？可能是截图？还有决议请...

标签： css layout twitter-bootstrap responsive-design

【解决方案1】：

你应该试试这些：

升级您正在使用的 Firefox 版本。
从浏览器中删除 cookie。
安装 firebug 和开发者工具栏来检查页面，问题可能出在.css。通过删除一些属性在萤火虫中检查它。

【讨论】：

升级 Firefox 并删除 cookie 有效。但我应该注意，我完全卸载了 Firefox - 包括用户配置文件，可以通过以下说明找到：support.mozilla.org/en-US/kb/…

【解决方案2】：

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

table {table-layout:fixed}

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

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

祝你好运！

【讨论】：

再看一下，我可以确认在我的系统上问题是由 Mozbar 2.22 Firefox 插件引起的。如果我禁用该插件，Firefox 会开始在窄屏幕上正确显示基于 Bootstrap 的站点。如果您仍想使用 Mozbar，还有一个 Chrome 版本，如果您将工具栏固定到屏幕一侧，它似乎可以正常工作。
对我来说，是 Grease Monkey 插件导致它无法工作。在我删除它之后，css 就像一个魅力

【解决方案5】：

你需要添加：

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

之前

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

【讨论】：

我试过了，但是没用，我改了上面的代码来显示新版本
是的...您面临的问题是什么？让我们知道吗？休息是什么意思？有截图吗？