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>

我怎样才能使Twitter Bootstrap井与其外部div相同的高度？

1 个答案: