jquery - Twitter bootstrap响应 block 高度

Question

在我的 Twitter Bootstrap 3.2 应用程序中，我有具有响应宽度的 div block 。

但是如果我删除“行”类，由于内容长度的变化， block 高度会变得不同，因此 block 看起来很奇怪。检查大于 992px 的屏幕宽度:http://jsfiddle.net/mavent/bFcrq/13/

如果我使用“row”类，我的页面看起来不错:http://jsfiddle.net/mavent/bFcrq/15/但我不知道什么时候使用行类。因为屏幕尺寸不同，所以我不知道是否可以使用每 2 个 div 或 3 个 div 的行类。

所以我的问题是，如何使这些 block 具有相同的高度，以便即使小屏幕和大屏幕也有漂亮的外观？

<div class="text-center"> <div class="visible-xs visible-sm">Small screen is ok, There is problem for big screens </div> <div class="well col-lg-4 col-md-4 col-sm-12 col-xs-12"> <a href=""><h2>My pretty title 1</h2><p>My subtitle which can have different number of words</p></a> </div>

编辑:还要检查大屏幕中的此行为:http://jsfiddle.net/bFcrq/26/
即使我使用“行”类，有些 block 很长，有些很短。
当我使用“alert-*”类时，它看起来很糟糕。

Edit2:虽然我更喜欢 CSS 解决方案，但基于 JQuery 的解决方案对我来说也可以。

Answer 1

我认为这是在没有 javascript 的情况下可以做的最好的事情:http://jsfiddle.net/V2F9E/6/

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-xs-12">
            <h1>1</h1>
            <p>Sub</p>
        </div>
        <div class="col-lg-4 col-md-6 col-xs-12">
            <h1>2</h1>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>

        <div class="clearfix visible-md-block "></div><!--This clearfix has to be set every 2 div because that's when col-md break to a new line-->

        <div class="col-lg-4  col-md-6 col-xs-12">
            <h1>3</h1>
            <p>Sub</p>
        </div>

        <div class="clearfix visible-lg-block "></div><!--This clearfix has to be set every 3 div because that's that col-lg break to a new line-->

        <div class="col-lg-4  col-md-6 col-xs-12">
            <h1>4</h1>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>

        <div class="clearfix visible-md-block "></div><!--This clearfix has to be set every 2 div because that's when col-md break to a new line-->

        <div class="col-lg-4  col-md-6 col-xs-12">
            <h1>5</h1>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <div class="col-lg-4  col-md-6 col-xs-12">
            <h1>6</h1>
            <p>Sub</p>
        </div>

        <div class="clearfix visible-md-block "></div><!--This clearfix has to be set every 2 div because that's when col-md break to a new line-->

         <div class="clearfix visible-lg-block "></div><!--This clearfix has to be set every 3 div because that's that col-lg break to a new line-->

    </div>
</div>

请注意:

<div class="clearfix visible-lg-block">
</div>.

有关网格重置的更多信息:http://getbootstrap.com/css/#grid-responsive-resets

编辑

您还可以查看 flex 盒。也许这会对你有所帮助，它结合了 bootstrap 和 flexbox。 http://www.bootply.com/zoupRVbLG4