Bootstrap 3 和 flexbox 的等高列

Question

我正在使用 Bootstrap 3（遗憾的是无法将其更改为 Bootstrap 4），我需要实现如图所示的 same-height 列效果：我已经成功地通过使用绝对位置和@media screen 来获得正确大小的图像和填充（黄色区域）来让它工作，但我相信有更好的方法来解决它。

我找到了很好的工作代码 here, but adding picture on top destroys design - picture goes in additional column and streches all the content (here)。添加 display:block 让我回到原来的问题 - 不同高度的列。

我确信有一些干净而机智的方法可以让它发挥作用！

编辑：到目前为止，我有一个主行（下图中的绿色框），其中有 3 列。如果我改为制作 3 行（红色框）并仅对中间内容应用相同的高度怎么办？它在大屏幕上运行良好，但在小屏幕上，当列占据屏幕的整个宽度时，它最终会包含 3 张图片一个接一个，三个描述部分一个接一个，三个按钮一个接一个 - 绝对不是我想要的！在这种情况下有没有办法重新排列列的显示，所以我会得到 3x picture-description-button？

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>

Answer 1

在 CSS 中没有其他方法可以使其高度相同。我的意思是动态的（没有设置特定的高度）。

如果您将 display flex 更改为 display block。不行。

选项：Javascript。获取 3 个 flex-children 的高度并使用 Math.max() 进行比较；将 return 数字设置为 flex-children.

* {
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.flex-children {
  width: 30%;
  background: red;
}

<div class="flex">
  <div class="flex-children">asd</div>
  <div class="flex-children">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora et nisi harum eaque quas similique esse voluptas? Expedita in vitae, vel unde deleniti hic dolores rerum. Aliquam quos quidem quae.</p>
  </div>
  <div class="flex-children">ddey</div>
</div>

只需覆盖特定内容的 bootstrap 样式。

Answer 2

我认为您只需要继续将 flexbox 的应用扩展到子项中即可。

但是请注意，图像可能会对原生 flex-child 产生不良反应。将图像包裹在 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-->

Codepen Demo

Bootstrap 3 和 flexbox 的等高列

Equal height columns with Bootstrap 3 and flexbox

html

css

flexbox

twitter-bootstrap-3

display