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

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

感谢

Answer 1

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

或者另一个解决方案是为图像和导航提供最小高度。最小高度应该是购物车的高度。

Answer 2

使用自定义类

.row-eq-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();
});

css bootstrap 3列高度相同

3 个答案: