Bootstrap Safari中的第一行有3個網格中斷

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; }