Mozilla Firefox 中的 Bootstrap Grid 排列不均匀答案

【问题标题】：Bootstrap Grid unevenly arranged in Mozilla FirefoxMozilla Firefox 中的 Bootstrap Grid 排列不均匀
【发布时间】：2016-10-27 23:23:55
【问题描述】：

我正在使用 Bootstrap 构建网站。我用过Grid。网格在 Google Chrome 中排列均匀，但在 Mozilla Firefox 和 Microsoft Edge 中查看时排列不均匀。基本结构如下：

<row>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
</row>
<row>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
</row>
.
.
</row> //n-th row

您可以查看网站的输出： Link to Website

【问题讨论】：

您需要将 12 个<div> 放在一行中。试试吧。或至少 6 个。只有 6 和 12 可分为：2x3 或 4x3、1x6 或 2x6。
@KIKOSoftware 不，它不起作用

标签： html css twitter-bootstrap firefox

【解决方案1】：

添加<div class="clearfix"></div>

在关闭每个<row> 标签之前...如下所示

    <row>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="clearfix"></div>
    </row>
    <row>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="clearfix"></div>
    </row>
    .
    .
    <div class="clearfix"></div>
    </row> //n-th row

【讨论】：