![行响应 行响应]()
本文介绍了相同高度的列引导程序 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 行响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
08-01 11:25