一行中有很多 col-md*，对吗？答案

【问题标题】：Many col-md* inside one row, is it correct?一行中有很多 col-md*，对吗？
【发布时间】：2016-10-21 11:26:26
【问题描述】：

它在 chrome 中工作，但在 firefox 中显示不佳。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
    <div class="col-md-3 col-sm-3 col-xs-6"><strong>Name</strong></div>
    <div class="col-md-9 col-sm-9 col-xs-6">test</div>
    <div class="col-md-3 col-sm-3 col-xs-6"><strong>Sex</strong></div>
    <div class="col-md-9 col-sm-9 col-xs-6">Male</div>
    <div class="col-md-3 col-sm-3 col-xs-6"><strong>Age</strong></div>
    <div class="col-md-9 col-sm-9 col-xs-6">16</div>
    
</div>
</div>
    
      
  </div>

镀铬

Firefox 47(MacOSX)：

【问题讨论】：

有什么问题？分享截图
你确定吗？我刚刚在Firefox中运行它并且它正在工作，您的示例代码似乎不足以重现问题
在 Firefox 中打开此 bootply.com/xqz4nhqnDZ，结果与在 Chrome 中相同（在 Windows 上）。可能是 Mac 的东西，试试看 mac 中默认的样式元素。
以上 bootply 示例在 firefox/mac 中仍然显示混乱

标签： html twitter-bootstrap google-chrome firefox twitter-bootstrap-3

【解决方案1】：

你使用label标签对吗？

如果是，则添加此 css

label{margin-bottom:0;
}

【讨论】：

不，我没有使用标签。但即使我使用标签和这个css，Firefox中的显示仍然混乱
它的内部面板和容器流体。

【解决方案2】：

您的 Firefox 版本可能在 Quirk 模式下运行，其中布局不标准并且可能无法正确显示。
使用<!DOCTYPE html> 以全html 标准模式运行。

https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode

还可以尝试清除缓存。请看以下链接：

https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems

【讨论】：

【解决方案3】：

这完全正确。 Bootstrap allows 在一行中使用多个块。这是一个有用的功能：

列换行
如果在一行中放置超过 12 列，则每组额外的列将作为一个单元换行。

【讨论】：