Question

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 1

一般的想法是，您应该使用element.offsetHeight之类的内容检查您感兴趣的列的高度，然后使用element.style.height

将最大的列应用于所有列

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

根据你的小提琴，这是一个非常幼稚的你想要实现的实现：https://jsfiddle.net/t7v5x48q/3/（注意我还添加了一个CSS规则，除了JS）

固定高度列与Bootstrap

1 个答案: