Question

我没有找到解决问题的方法，所以我真的希望你能帮助我。

这是我的jsfiddle。

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

<!-- snippet 1 -->
<div class="col-md-12 col-sm-12">
    <div class="col-md-6 col-sm-6" style="padding:0;">
        <div class="well" style="border-right:1px solid black;">
            Test
        </div>
    </div>
    <div class="col-md-6 col-sm-6" style="padding:0;">
        <div class="well">
            srewdf<br>srewdf<br>srewdf<br>srewdf<br>
        </div>
    </div>
</div>
 
<!-- snippet 2 -->
<div class="col-md-12 col-sm-12">
    <div class="col-md-9 col-sm-9" style="padding:0;">
        <div class="well" style="border-right:1px solid black;">
            srewdf<br>srewdf<br>srewdf<br>srewdf<br>
            srewdf<br>srewdf<br>srewdf<br>srewdf<br>
        </div>
    </div>
    <div class="col-md-3 col-sm-3" style="padding:0;height:50%;">
        <div class="well">
            Test
        </div>
    </div>
    <div class="col-md-3 col-sm-3" style="padding:0;height:50%;">
        <div class="well">
            Test
        </div>
    </div>
</div>

在代码段1中，我需要多个嵌套元素，以基于最大元素具有相同的高度。在第二个片段中，它是相似的。右侧的两个元素应该与左侧元素的高度相同。

如何在不失去责任的情况下解决这个问题？

感谢您的时间和帮助！

Answer 1

等高柱是CSS模型中的一个着名问题，Bootstrap可以帮助你做很少的事情。

你能做的最好的就是阅读大量的文献（我建议从http://css-tricks.com/fluid-width-equal-height-columns/开始）并找出适合你的目的的各种黑客和限制。这将根据目标浏览器，您希望投入的时间，您使用Javascript的体验以及您要定位的设备而有所不同。

Answer 2

感谢您的所有答案/评论。

这就是我现在解决的问题：

$( document ).ready(function() {
    var heights = $(".equalize").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".equalize").height(maxHeight);
});

我希望我能用普通的HTML / CSS来做，但是，这是一种简单的方法。

Bootstrap：嵌套col-md- *元素的相等高度

2 个答案: