如何让 Twitter Bootstrap 井与它们的外部 div 高度相同？

Question

我正在使用 Bootstrap 网格创建四边形图表，并利用 here 讨论的 CSS3 flexbox 布局模式使同一行中的每一列具有相同的高度。但是，我想在每个四边形中使用 Bootstrap 井来突出图表的“四边形”，我似乎无法弄清楚如何让井来填充列 div 中的所有空间。

<div class="row row-eq-height">
    <div class="col-md-6">
        <div class="well">
            hello<br/>world<br/>how<br/>are<br/>you?
        </div>
    </div>
    <div class="col-md-6">
        <div class="well">
            hi!
        </div>
    </div>
</div>
<div class="row row-eq-height">
    <div class="col-md-6">
        <div class="well">
            hi!
        </div>
    </div>
    <div class="col-md-6">
        <div class="well">
            hello<br/>world<br/>how<br/>are<br/>you?
        </div>
    </div>
</div>

我有一个游乐场here（一定要全屏查看结果以查看四边形图）。

我尝试修改井类的 CSS 以将高度设置为 100%，但这似乎也增加了外部 div 的高度（例如 here）。

有什么想法可以在不增加 div 高度的情况下让井填满它们所在的 div 吗？

编辑#1

明确地说，我不是在问如何使一行中的所有列都具有相同的高度。使用 row-eq-height 类的 Flexbox 解决方案为我做到了。

我想弄清楚的是如何使列 div 中的 Bootstrap well 成为列 div 的完整高度，而不管 well 包含多少内容。

我更新了我的两个示例（上面链接），在列 div 周围添加边框线，以尝试更好地表达我在说什么。

Answer 1

检查这个DEMO

 <div class="row row-eq-height">
    <div class="col-xs-6 "><div class="well">column 1</div></div>
    <div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>

      </div>
        <div class="row row-eq-height">
    <div class="col-xs-6 "><div class="well">column 1</div></div>
    <div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>

      </div>