我一直在为一个问题而苦苦挣扎,却不知道如何解决它:
我做了一个 FIDDLE :
HTML:
<div class="row-fluid">
<div class="span6">
<div class="alert alert-info">
this has text <br>
this has text <br>
</div>
</div>
<div class="span6">
<div class="alert alert-success">
<div class="media">
This needs to be same size as the other box.<br />
This needs to be same size as the other box.<br />
This needs to be same size as the other box.<br />
This needs to be same size as the other box.<br />
This needs to be same size as the other box.<br />
This needs to be same size as the other box.
</div>
</div>
</div>
</div>
</div>
</body>
无论框中是否有文本,我都希望两个框的大小相同。我试过添加一些 javascript,但我还没有弄清楚如何去做。
最佳答案
这里是一个使用 jQuery 的示例,它会查找您的所有行,然后以每行内必须匹配大小的列为目标。我将 row 和 col 作为参数传入,这意味着如果您更改结构,您只需使用您正在使用的类名更新调用即可。
var updateHeights = function (rowTarget, colTarget) {
$(rowTarget).each(function () {
var maxHeight = 0;
$(colTarget, this).each(function () {
if (maxHeight <$(this).height()) {
maxHeight = $(this).height();
}
});
$(colTarget, this).each(function () {
$(this).height(maxHeight);
});
});
};
updateHeights('.row-fluid','.alert');
fiddle :http://jsfiddle.net/leighking2/rk4t6c45/
我不喜欢它的一件事是它循环两次,一次是为了找到最大的高度,然后再次设置它。
关于javascript - 强制两个行流体大小相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25742303/