本文介绍了相同高度的列引导3行响应的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
Hi我有一个引导行的四个div。我想要在这一行中的所有div具有相同的高度,不打破责任。我不知道如何这样做,而不打破责任。
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.
: - )
<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>
推荐答案
找出4个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.
这里是代码:
$( document ).ready(function() {
var heights = $(".well").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".well").height(maxHeight);
});
这篇关于相同高度的列引导3行响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!