CSS自举3列与

Question

即时具有下述布局相同的高度：

标记：

<div class="row"> 
    <div class="col-md-12">      
     <div class="row"> 
      <div class="col-md-6"> 
      <img class="img-responsive" src="/app/img/shop/teaser.jpg"> 
     </div> 
     <div class="col-md-3"> 
      <div class="boxuser"> 
       user 
      </div> 
      <a href="/shop/cart" class="cart"> 
       cart 
      </a> 
     </div> 
     <div class="col-md-3"> 
      <div class="navi"> 
       navi 
      </div> 
     </div> 
    </div>     
</div> 

    [1]: http://i.stack.imgur.com/WNuXu.jpg 

用户和购物车是具有固定高度，我想有图像和navi响应，所以他们都有相同的高度。 任何想法，如果有可能？

谢谢

Answer 1

这是一个不错的。但逻辑上不可能。我的意思是图片无法响应，但图像（div）的容器可以响应。因为图片有一个高度。如果您根据用户购物车调整大小，Image看起来会很糟糕。但你可以看看masonry script。通过使用砌体，你可以得到你想要的。

或者另一种解决方案是给图像和navi以最小高度。最小高度应该是购物车的高度。

Answer 2

使用自定义类

.equal-height { 
      display: -webkit-box; 
      display: -webkit-flex; 
      display: -ms-flexbox; 
      display:   flex; 
      } 

例子：

<div class="row row-eq-height"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
</div> 

Answer 3

您可以使用或Flexbox的或本script与jQuery

HTML

<div class="row"> 
    <div class="col-md-12">      
    <div class="row same-height"> 
     <div class="col-md-6"> 
     <img class="img-responsive" src="/app/img/shop/teaser.jpg"> 
    </div> 
    <div class="col-md-3 same-height"> 
     <div class="boxuser"> 
      user 
     </div> 
     <a href="/shop/cart" class="cart"> 
      cart 
     </a> 
    </div> 
    <div class="col-md-3 same-height"> 
     <div class="navi"> 
      navi 
     </div> 
    </div> 
    </div>     
</div> 

JS

$(function() { 
    $('.same-height').matchHeight(); 
});