相同高度的列引导程序 3 行响应 [英] Same height column bootstrap 3 row responsive

查看：27
本文介绍了相同高度的列引导程序 3 行响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在引导行中有四个 div.我希望这一行中的所有 div 都具有相同的高度并且不破坏责任.我不知道如何在不破坏责任的情况下做到这一点.

我尝试用固定高度解决这个问题，但就响应速度而言，这是一个糟糕的解决方案.

谢谢:-)

<div class="col-md-3 index_div_item"><a href="#"><div class="well" id="item1"><h1 class="h1_item"><span class="titre_item">Title</span></h1><h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2><p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem Adultae virginis diuturnum missingia pauperis erubesceret patr</p>
</a>

<div class="col-md-3 index_div_item"><a href="#"><div class="well" id="item2"><h1 class="h1_item"><span class="titre_item">Title</span></h1><h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2><p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem Adultae virginis diuturnum missingia pauperis erubesceret patr</p>

</a>

<div class="col-md-3 index_div_item"><a href="#"><div class="well" id="item3"><h1 class="h1_item"><span class="titre_item">Title</span></h1><h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2><p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem Adultae virginis diuturnum missingia pauperis erubesceret patr</p>

</a>

<div class="col-md-3 index_div_item"><a href="#"><div class="well" id="item4"><h1 class="h1_item"><span class="titre_item">Title</span></h1><h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2><p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem Adultae virginis diuturnum missingia pauperis erubesceret patr</p>

</a>

解决方案

您可以使用 javascript 来实现这一点.找出 4 个 div 中最大的高度，并使它们与最大的高度相同.

代码如下:

$( 文档 ).ready(function() {var heights = $(".well").map(function() {返回 $(this).height();}).得到();maxHeight = Math.max.apply(null, heights);$(".well").height(maxHeight);});

编辑历史:将','符号改为';'签名

Hi I have four divs in a bootstrap row. I want all divs in this row to have the same height and not break responsibility. I don't know how to do this without breaking responsibility.

I have tried solving this with fixed heights but in terms of responsiveness this is a bad solution.

Thanks :-)

<div class="row">
    <div class="col-md-3 index_div_item">
        <a href="#">
        <div class="well" id="item1">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item2">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>  
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item3">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>
        </a> 
    </div>  
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item4">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
            </div>  
        </a>  
    </div>              
</div>

解决方案

You can achieve this by using javascript. Find out the biggest height of the 4 divs and make all of them at the same height like the biggest one.

Here is the code:

$( document ).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get();

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
});

edit history: changed the ',' sign into ';' sign

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆