Twitter bootstrap 列的高度不相同

嗨，我想让我的专栏保持同样的高度。但以下是我的结局：

我试图给我的

img

标签分别赋予

width

和

height

属性700和400。但这也没有奏效。以下是我如何结束的图片：

这是我的一段代码：

<div class="container">
    <div class="row">
        @foreach ($projects as $project)
            <div class="col-lg-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="data:image/{{$project->image_type}};base64,{{$project->image}}">
                </a>
                <h3>
                    <a href="#"> {{ $project->name }}</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p </div>
            </div>
        @endforeach
    </div>
    <hr>
    <div class="row text-center">
        <div class="col-lg-12">
            {!! $projects->render() !!}
        </div>
    </div>
</div>

@foreach（$项目作为$项目）
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam viverra euismod odio，孕妇pellentesque urna varius vitae.
render（）！！}

将项目包装到一个文件夹中。只需将以下类添加到items父级，在本例中为

.row

：

。等高{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
}

@foreach（$项目作为$项目）
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam viverra euismod odio，孕妇pellentesque urna varius vitae.
pdemo与您的标记一起，已将code.col-lg-4/code更改为code.col-xs-3/code，因此它适合于fiddle结果框架，但没有任何区别->基于@davidkonrad所说的内容，您可以使用如下边距顶部规则偏移每个图像（内部项目）：



Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam viverra euismod odio，孕妇pellentesque urna varius vitae。
Lorem ipsum dolor sit amet，是一位杰出的献身者。
Lorem ipsum dolor sit amet
.第1项{
背景颜色：绿色；
显示：块；/*默认情况下图像是内联的*/
}
.第2项{
背景颜色：黄色；
边缘顶部：100px；
显示：块；/*默认情况下图像是内联的*/
}
.内部项目-3{
背景颜色：蓝色；
边缘顶部：140px；
显示：块；/*默认情况下图像是内联的*/
}
.投资组合项目{
边框：1px纯红；
填充：0；
}
.等高{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
}
解决方案很简单，您应该向图像的容器或图像本身添加
max height
属性。图像的纵横比会发生变化，导致图像变小（因此它们可以保持纵横比）。设置
max height
将防止图像缩放超过指定高度。
我已经按照您的要求完成了。但是它没有解决：（.结果是：@superkytoz，盒子的高度是相等的，我确信-但是你的图片在高度/大小上非常不同。也许这是你真正的问题？这确实是正确的。出现这个问题，因为我的图片在高度/大小上确实不同。但不幸的是，我不知道如何解决它。
<div class="row equal-height">
    <div class="col-xs-3 portfolio-item">
        <div class="inner-item-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.
        </div>
    </div>
    <div class="col-xs-3 portfolio-item">
        <div class="inner-item-2">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>            
    </div>
    <div class="col-xs-3 portfolio-item">
        <div class="inner-item-3">
            Lorem ipsum dolor sit amet
        </div>
    </div>
</div>

.inner-item-1 {
    background-color: green;
    display: block; /* images are inline by default */
}
.inner-item-2 {
    background-color: yellow;
    margin-top: 100px;
    display: block; /* images are inline by default */
}
.inner-item-3 {
    background-color: blue;
    margin-top: 140px;
    display: block; /* images are inline by default */
}
.portfolio-item {
    border:1px solid red;
    padding: 0;
}
.equal-height {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}