我正在使用 Bootstrap 3(遗憾的是无法将其更改为 Bootstrap 4)，我需要实现如图所示的等高列效果:
我已经成功地通过使用绝对位置和@media screen 获得正确尺寸的图像和填充(黄色区域)使其正常工作，但我相信有更好的方法来解决它。
我找到了不错的工作代码 here ，但在顶部添加图片会破坏设计 - 图片会出现在附加列中并拉伸(stretch)所有内容(here)。添加 display:block 让我回到原来的问题——不同高度的列。
我确信有一些干净而机智的方法可以让它发挥作用!
编辑: 到目前为止，我有一个主行(下图中的绿色框)，其中有 3 列。如果我改成 3 行(红色框)并只对中间内容应用相同的高度会怎样？它在大屏幕上运行良好，但在小屏幕上，当列占据整个屏幕宽度时，它最终会以 3 张图片一个接一个，三个描述部分一个接一个，三个按钮一个接一个 - 绝对不是我想要的!在这种情况下有没有办法重新排列列的显示，所以我会得到 3x 图片描述按钮？
edit2:添加了代码段
html,body {
height:100%;
}
.row-flex, .row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex:0;
}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
width:100%;
}<header>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</header>
<body>
<div class="container"><h3>.row-flex (make columns equal heights in each row)</h3></div>
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-xs-4">
<div class="well">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
</div>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://placehold.it/200x100">
<div class="well">
Duis pharetra varius quam sit amet vulputate.
</div>
</div>
<div class="col-xs-4">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi.
</div>
</div>
</div><!--/row-->
</div><!--/container-->
<hr>
</body>最佳答案
我认为你只需要继续将 flexbox 的应用扩展到 child 身上。
但是请注意，图像可能会对成为原生 flex-child 产生不良 react 。将图像包裹在 div 中可以解决问题。
html,
body {
height: 100%;
}
.row-flex {
display: flex; /* columns are now equal height */
}
.col-md-3 {
background: pink;
display: flex;
flex-direction: column;
}
.panel,
.well { /* make panels & wells expand to full height */
flex: 1;
display: flex;
flex-direction: column;
}
.panel-footer { /* push footer to bottom */
margin-top: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-flex">
<div class="col-md-3">
<div class="panel panel-default flex-col">
<div class="panel-heading">Title flex-col</div>
<div class="panel-body flex-grow">Content here -- div with .flex-grow</div>
<div class="panel-footer">Footer</div>
</div>
</div>
<div class="col-md-3">
<div>
<img class="img-responsive" src="http://placehold.it/400x100">
</div>
<div class="well">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit.
</div>
</div>
<div class="col-md-3">
<div class="well">
Duis pharetra varius quam sit amet vulputate.
</div>
</div>
<div class="col-md-3">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
</div>
</div>
</div>
<!--/row-->
</div>
<!--/container-->关于html - 使用 Bootstrap 3 和 flexbox 的等高列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39866922/