Twitter引导响应块高度

Posted 2023-03-06

【中文标题】Twitter引导响应块高度

【英文标题】：Twitter bootstrap responsive block heights

【发布时间】：2014-09-04 22:13:54

【问题描述】：

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

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

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

所以我的问题是，我怎样才能使这些块具有相同的高度，以便即使大小屏幕也具有漂亮的外观？

<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/ 即使我使用“行”类，有些块很长有些很短。 当我使用“alert-*”类时，它看起来很糟糕。

Edit2：虽然我更喜欢 CSS 解决方案，但基于 JQuery 的解决方案也适合我。

【问题讨论】：

您是否尝试过为大屏幕提供 6 列而不是 4 列？ jsfiddle.net/bFcrq/17 另外，在您的第一个小提琴中，您超出了 12 列网格的限制。你读过这方面的 BS 文档吗？

是的，但要利用所有屏幕，我更喜欢大屏幕使用 4 列。

我同意@BuddhistBeast 6 列将比 4 列使用更多的屏幕，所以如果这就是您想要的，请选择 6。此外，没有理由拥有 col-xs-12 ，如果它们从上面的大小发生变化，您只需要指定列数，因此您的col-small-12 已经为xs 设置了 12 列。

我会这样做：jsfiddle.net/bFcrq/19

或者你可以这样做：jsfiddle.net/bFcrq/21

【参考方案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

编辑

你也可以看看 flexbox。也许这会对你有所帮助，它将引导程序与 flexbox 结合起来。 http://www.bootply.com/zoupRVbLG4

【讨论】：

@trante 看看我的编辑。可能是你要找的东西;)

它只支持 IE10+ caniuse.com/#feat=flexbox，但它是一个不错的解决方案 ;)

【参考方案2】：

我创建了这个基于 javascript 的解决方案。 小提琴：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

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);
    );