Bootstrap列不漂浮/用柔性盒包装到下一行

Question

我试图使用几种方法创建相同高度的引导列，这些方法是我通过here找到的。到处都是完美的工作，除了在mac上的safari，所有的列在第一行堆叠而不是浮动到下一个。 这里是HTML：

<div class="row"> 
    <div class="col-md-4 col-sm-4 col-xs-6 text-center"> 

     <div class="product_card"> 
      <a href="/buy/handsome-cream-3-pc-jodhpuri-suit"><img alt="Handsome Cream 3 Pc Jodhpuri Suit" 
                    src="/system/images/attachments/000/000/174/normal/open-uri20160927-22035-h7grcj?1474996752"></a> 
      <div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;"> 
       <i class="fa fa-star-o" aria-hidden="true"></i> Shortlist 
      </div> 

      <a class="caption" href="/buy/handsome-cream-3-pc-jodhpuri-suit"> 
       <h3>Handsome Cream 3 Pc Jodhpuri Suit</h3> 
       <span class="price">$380.00</span> 
      </a></div> 
    </div> 
</div> 

这里是正在使用的CSS：

.row { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
    &> [class*='col-'] { 
     display: -webkit-box; 
     display: -webkit-flex; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-box-orient: vertical; 
     -webkit-box-direction: normal; 
     -webkit-flex-direction: column; 
     -ms-flex-direction: column; 
     flex-direction: column; 
    } 
    } 

这里是MAC SAFARI截图：

这里是在Ubuntu铬截图：

为什么safari会用我的col- MDS？如何解决这个问题，而不使用JS？

Answer 1

我觉得简单的方法来做到这一点是通过制定者你在CSS想要的高度，去除img标签，并在你的第一个标签添加背景封面图片：

.product_card { 
 
    height: 300px; 
 
    width: 190px; 
 
    float: left; 
 
    margin: 4px; 
 
} 
 

 
.product_card a:first-child { 
 
    display: block; 
 
    height: 100%; 
 
    background-image: url('http://i.imgur.com/8YsAmq3.gif'); 
 
    background-position: center center; 
 
    -webkit-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.product_card:first-child { 
 
    margin-left: 0px; 
 
} 
 

 
.product_card:last-child { 
 
    margin-right: 0px; 
 
}

<div class="row"> 
 
<div class="col-md-4 col-sm-4 col-xs-6 text-center"> 
 

 
    <div class="product_card"> 
 
     <a href="/buy/pork" title="Amazing porks" style="background-image: url('http://lorempixel.com/output/animals-q-c-640-480-6.jpg');"></a> 
 
     <div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;"> 
 
      <i class="fa fa-star-o" aria-hidden="true"></i> Shortlist 
 
     </div> 
 

 
     <a class="caption" href="/buy/pork"> 
 
      <h3>Porks</h3> 
 
      <span class="price">$380.00</span> 
 
     </a></div> 
 
<div class="product_card"> 
 
     <a href="/buy/rhinoceros" title="Rhinoceros from Africa" style="background-image: url('http://lorempixel.com/output/animals-q-c-600-400-1.jpg');"></a> 
 
     <div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;"> 
 
      <i class="fa fa-star-o" aria-hidden="true"></i> Shortlist 
 
     </div> 
 

 
     <a class="caption" href="/buy/rhinoceros"> 
 
      <h3>Rhinoceros</h3> 
 
      <span class="price">$8 000.00</span> 
 
     </a></div> 
 
<div class="product_card"> 
 
     <a href="/buy/dog" title="Cuttie dog" style="background-image: url('http://lorempixel.com/output/animals-q-c-800-800-8.jpg');"></a> 
 
     <div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;"> 
 
      <i class="fa fa-star-o" aria-hidden="true"></i> Shortlist 
 
     </div> 
 

 
     <a class="caption" href="/buy/dog"> 
 
      <h3>Dogs</h3> 
 
      <span class="price">$380.00</span> 
 
     </a></div> 
 
</div> 
 
</div>