Bootstrap 3 在 Safari 中的第一行网格中断答案

【问题标题】：Bootstrap 3 grid breaks on first line in SafariBootstrap 3 在 Safari 中的第一行网格中断
【发布时间】：2017-04-21 13:44:33
【问题描述】：

我有一个包含一排产品的商店页面。在 chrome 中它看起来很好，如下所示：

 __   __   __   __
|  | |  | |  | |  |
|  | |  | |  | |  |
 ‾‾   ‾‾   ‾‾   ‾‾ 
 __   __   __   __
|  | |  | |  | |  |
|  | |  | |  | |  |
 ‾‾   ‾‾   ‾‾   ‾‾

但在 Safari 中，第一行只有 3 个元素：

 __   __   __ 
|  | |  | |  |
|  | |  | |  |
 ‾‾   ‾‾   ‾‾ 
 __   __   __   __
|  | |  | |  | |  |
|  | |  | |  | |  |
 ‾‾   ‾‾   ‾‾   ‾‾

HTML：

<div class="container">
  <div class="row">
    ...
      <div class="container">
        ...
          <ul class="row">
            <li>
              ...
            </li>
          </ul>
        ...
      </div>
    ...
  </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

只需在你的 css (sass/less) 文件中使用这个 sn-p。

.row:before, .row:after{
  display:inline-block;
}

之后应该可以工作。

来源：https://github.com/twbs/bootstrap/issues/9282#issuecomment-413421690

【讨论】：

【解决方案2】：

您已为每个产品项指定了 col-md-3 类。这意味着25% 的宽度。但是你也给了它一些填充，这会将它的宽度增加到 25% 以上，导致最后一个元素进入下一行。

此外，整个结构似乎编码不佳。无论如何，这是解决您问题的快速方法。将此添加到最后的 CSS 中。

.products .product { width: 24%; }

另外，我看到您的文件中有此代码。这对我来说似乎也是一个原因。

.products .col-md-4:nth-child(3n+1), .products .col-md-3:nth-child(4n+1) { clear: none; }

【讨论】：

在检查器中，我看到每个产品的宽度是 285px，容器/行是 1140px。因此，这应该最多连续添加 4 个产品 - 就像其他产品一样。添加width:24% 看起来有点太老套了...我也尝试删除您建议的行，但我看不出有什么区别。
但是删除它旁边的行确实解决了问题！谢谢
太hacky，请参考stackoverflow.com/questions/34250282/…

【解决方案3】：

这可能是你给的

显示：弹性； flex-wrap: 换行；

在 col-md-3 中。删除它，它会工作。

【讨论】：