Bootstrap 3 嵌套行在 Firefox 中的工作方式与 Chrome 和 Explorer 不同答案

【问题标题】：Bootstrap 3 nested rows work different in Firefox than Chrome and ExplorerBootstrap 3 嵌套行在 Firefox 中的工作方式与 Chrome 和 Explorer 不同
【发布时间】：2015-11-26 12:01:02
【问题描述】：

我在嵌套行时遇到了一些问题，因为 Firefox、Chrome 和 Explorer 中的行为不同。

我有两个不同的 sn-ps：

<div class="row">
    <div class="col-md-2">
        <div class="sidebar affix">
            <div class="row">
                <div class="col-md-12">
                   <div class="panel panel-primary">
                      Some content here
                   </div>
                </div>
            </div>
         </div> 
    </div>
    <div class="col-md-offset-2 col-md-8">
        <div class="content">
           Some other content
        </div>
    </div>
</div>

Firefox 中的结果是这样的

同时在 Chrome 和 Explorer 9 中看起来像

代码似乎格式正确。我尝试的解决方案是将“col-md-12”更改为“col-md-3”，但现在，我在 Chrome 和 Explorer 中得到了预期的结果，但在 Firefox 中没有。

是否有任何解决方法或方法可以使引导程序根据浏览器使用不同的类？

【问题讨论】：

可能是affix插件引起的？但是，请将您的 CSS 代码附加到问题中或提供一个有效的 sn-p / fiddle（您可以阅读这对您有很大帮助：blog.stackoverflow.com/2014/09/…）
我依赖 CSS 而不是 affix.js。该代码在 Firefox 中开箱即用。这很奇怪。
请做一个工作小提琴或 sn-p 看看问题是否正常，这是最好的

标签： css twitter-bootstrap google-chrome firefox

【解决方案1】：

Bootstrap 文档似乎与此相反，但我在我的项目中发现，如果我想将行嵌套在其他行中，我还必须包含一个内部 .container-fluid。

例如：

<div class="row">
    <div class="col-md-2">
        <div class="sidebar affix">
            <div class="container-fluid">
                <div class="row">
                   <div class="col-md-12">
                       <div class="panel panel-primary">
                          Some content here
                       </div>
                    </div>
                </div>
             </div>
         </div> 
    </div>
    <div class="col-md-offset-2 col-md-8">
        <div class="content">
           Some other content
        </div>
    </div>
</div>

当我这样做时，我看不到 Firefox 和 Chrome 之间的任何渲染差异。

【讨论】：