Question

我有一系列产品的商店页面。在Chrome中看起来很好，就像这样：

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

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

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

HTML：

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

Answer 1

您为每个产品项目提供了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; }

Answer 2

只需在您的css（少/少）文件中使用此代码段即可。

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

以后应该工作。

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

Answer 3

这可能是你给的

显示：flex; flex-wrap：包裹;

在col-md-3中。删除它，它将起作用。

Safari中第一行的Bootstrap 3网格中断

3 个答案: