列不在同一高度

Question

您好，我正在尝试让我的列处于相同的高度。但这是我如何结束的图片：

我曾尝试将 width 和 height 属性分别设置为 700 和 400 到我的 img 标签。但这也没有成功。这是我如何结束的图片：

这是我的一段代码：

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

Answer 1

将项目包装成 flexbox。只需将以下 class 添加到项目父级，在本例中为 .row :

.equal-height {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

<div class="row equal-height">
  @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>

带有标记的演示，已将 .col-lg-4 更改为 .col-xs-3，因此它适合 fiddle 结果框架，但没有任何区别 -> http://jsfiddle.net/63zvdLyu/

Answer 2

根据@davidkonrad 所说的内容，您可以使用像这样的 margin-top 规则来偏移每个图像（内部项目）：

JS Fiddle

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

Answer 3

解决方法很简单，你应该在图像的容器或图像本身添加一个max-height 属性。图像的纵横比不同，导致图像变小（因此它们可以保持纵横比）。设置 max-height 将防止图像缩放超出指定高度。

列不在同一高度

Columns are not on the same height

twitter-bootstrap

laravel

blade

twitter-bootstrap-3

laravel-5