Bootstrap 3 和 flexbox 的等高列答案

【问题标题】：Equal height columns with Bootstrap 3 and flexboxBootstrap 3 和 flexbox 的等高列
【发布时间】：2017-02-13 11:35:10
【问题描述】：

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

我找到了很好的工作代码here，但在顶部添加图片会破坏设计 - 图片进入附加列并拉伸所有内容 (here)。添加 display:block 让我回到原始问题 - 不同高度的列。

我敢肯定有一些干净而诙谐的方法可以让它发挥作用！

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

edit2：添加了 sn-p

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>

【问题讨论】：

标签： html css twitter-bootstrap-3 flexbox display

【解决方案1】：

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

如果您将显示 flex 更改为显示块。它不会工作。

选项：Javascript。获取 3 个 flex-children 的高度并使用 Math.max() 进行比较；将返回编号设置为 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>

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

【讨论】：

【解决方案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

【讨论】：

我已经将它与@media screen (min-width:x) 混合用于为较小的屏幕包装列，它就像一个魅力。很有帮助，谢谢！