html - Bootstrap : Equal height of nested col-md-* elements

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 的经验以及您的目标设备而有所不同。