使用引导程序的固定高度列

Fixed height columns with Bootstrap

本文关键字：高度 引导程序      更新时间：2023-09-26

我想将所有 3 列的高度设置为网格中最高列的高度。这将逐页更改，那么有没有办法在不设置实际min-height值的情况下执行此操作？

https://jsfiddle.net/t7v5x48q/

/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
    margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">
<div style="background: #eaeaea; padding: 10px;"><a href="#"><img class="img-responsive" src="http://www.placehold.it/300x300" alt="" /></a>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis faucibus dui, a malesuada nibh sagittis ut. Nunc mauris velit, rutrum id lobortis nec, ornare in diam. Nullam iaculis sem non mollis fermentum. Morbi pellentesque.</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">
<div style="background: #eaeaea; padding: 10px;"><a href="#"><img class="img-responsive" src="http://www.placehold.it/300x300" alt="" /></a>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis faucibus dui, a malesuada nibh sagittis ut. Nunc mauris velit, rutrum id lobortis nec, ornare in diam. Nullam.</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">
<div style="background: #eaeaea; padding: 10px;"><a href="#"><img class="img-responsive" src="http://www.placehold.it/300x300" alt="" /></a>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis faucibus dui, a malesuada nibh sagittis ut. Nunc mauris velit, rutrum id lobortis nec.</p>
</div>
</div>
</div>

一般的想法是，您应该使用类似element.offsetHeight的内容检查您感兴趣的列的高度，然后用element.style.height将它们中最大的列应用于所有列

另一种方法是使用CSS flex模型，在这种情况下，您将不需要JavasScript

这是基于您的小提琴想要实现的目标的一个非常幼稚的实现：https://jsfiddle.net/t7v5x48q/3/（请注意，除了 JS 之外，我还添加了一个 CSS 规则）

相关文章：