Twitter引导响应块高度 [英] Twitter bootstrap responsive block heights

问题描述

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

In my Twitter Bootstrap 3.2 application I have div blocks that has resposive widths.

但是如果我删除row类，由于内容长度的改变，块高度变得不同，所以块看起来很奇怪。检查此宽度是否大于992像素的屏幕： http://jsfiddle.net/mavent/bFcrq/13/

But if I remove "row" class, due to change of the content length, block heights become different so, blocks look weird. Check this width a screen bigger than 992px: http://jsfiddle.net/mavent/bFcrq/13/

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

If I use "row" class, my page looks good: http://jsfiddle.net/mavent/bFcrq/15/ But I can't know when to use row class. Because screen size differs, so I can't know whether I can use row class per 2 divs or 3 divs.

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

So my question is, how can I make this blocks to have same height so even small and big screens have pretty appearance ?

<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/

即使我使用row类，一些块长一些

当我使用alert- *类时，它看起来很糟糕。

Also check this behaviour in big screens: http://jsfiddle.net/bFcrq/26/
Even I use "row" class, some blocks are long some are short.
It looks very bad when I use "alert-*" classes.

Edit2：虽然我喜欢CSS解决方案，

Although I prefer CSS solutions, a JQuery based solution also ok for me.

推荐答案

我创建了这个基于javascript的解决方案。

Fiddle： http://jsfiddle.net/mavent/zobhpkvz/7/

I created this javascript based solution.
Fiddle: http://jsfiddle.net/mavent/zobhpkvz/7/

// html

<div class="row modify_parent">
    <div class="col-sm-4 alert alert-success modify_child">Some thing happens here..
        <br>Some thing happens here..
        <br>Some thing happens here..
        <br>Some thing happens here..
        <br>Some thing happens here..
        <br>
    </div>
    <div class="col-sm-offset-2 col-sm-4 alert alert-success modify_child">Other thing happens here..
        <br>
    </div>
</div>

// javascript

// javascript

var sameHeightTop = $(".modify_parent");
if (sameHeightTop.length !== 0) {
    sameHeightTop.each(function () {
        var tallest = 0;
        var sameHeightChildren = $(this).find(".modify_child");
        sameHeightChildren.each(function () {
            var thisHeight = $(this).height();
            if (thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        sameHeightChildren.height(tallest);
    });
}

这篇关于Twitter引导响应块高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！