可以强制引导列到相同的高度并垂直对齐 div + 跨浏览器支持答案

【问题标题】：Possible to force bootstrap columns to same height & vertically align divs + crossbrowser Support可以强制引导列到相同的高度并垂直对齐 div + 跨浏览器支持
【发布时间】：2017-01-21 18:36:00
【问题描述】：

所以，我正在尝试执行以下操作：

无论内容如何，将引导程序中的列设置为相同高度
然后，垂直对齐以使这些列中的内容居中
并且，让这一切都跨浏览器兼容（IE 的最低阈值，10+）

使用 flexbox 的前两个步骤非常简单，但在我的浏览器堆栈测试中，它们无法让内容在 IE 10+ 上看起来正常。

有人知道怎么做吗？这是我当前在 browserstack 上有问题的代码的 codepen：http://codepen.io/myriad1729/pen/JRGVZO（下面的 HTML/CSS）

您会看到它适用于任何现代浏览器，但在 IE11 上，第 2 列实际上似乎被向下推了一整行，使所有内容看起来都不错，Bob。

如果有人对我忽略的简单的一站式解决方案有任何见解，如果我的 CSS 中存在导致 IE10/11 上出现该问题的问题，我将不胜感激，或者，如果解决方案是选择性地针对 IE10/11 并执行...某事。

谢谢！

CSS / HTML：

// And add in pertinent Bootstrap CSS

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

[class*="col-"] {
  display: flex;
  flex-direction: column;
}

.itemSource {
  margin: 0;
}

h2 {
  margin-top: 4rem;
  font-size: 1.2em;
  letter-spacing: 0;
  margin-bottom: 2rem;
  text-transform: uppercase;
  color: #555;
  font-weight: 300;
}

p {
  font-size: 1em;
  font-weight: 400;
}

<section class="listEntries">
  <div class="row"> <!-- Caleb -->
    <div class="col-xs-offset-3 col-xs-6 col-sm-offset-4 col-sm-4 col-md-offset-1 col-md-3 col-lg-offset-2 col-lg-2">
      <img src="http://c51e0534b271998a1a94-58706dfbc342bfcb8f938b36c845fe8a.r14.cf1.rackcdn.com/uploads/first-person-sharing-our-story.jpg" class="img-circle img-responsive">
    </div>
    <div class="col-xs-12 col-sm-offset-1 col-sm-10 col-md-offset-0 col-md-8 col-lg-6">
      <div class="itemSource">
        <h2><strong>George Costanza</strong> Director</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum bibendum justo, et gravida orci bibendum in. Nunc ornare nulla non eros ultrices vestibulum. Suspendisse vitae libero in ligula laoreet sodales. Vivamus in tortor et nulla euismod congue. Phasellus nec semper tellus. Sed sagittis magna id orci placerat, eget aliquet ante tincidunt. Suspendisse vitae mattis elit, in aliquam sem. Nunc efficitur finibus lorem, eu lobortis ante condimentum id. Aenean id augue ut turpis tincidunt viverra.
        </p>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

标签： css twitter-bootstrap alignment flexbox vertical-alignment

【解决方案1】：

我使用这个解决方案来解决这个问题

没有 JavaScript。

我在 this link 上找到它。

<div class="row row-flex row-flex-wrap">
    //Your well code
</div>

并添加这个 css：

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

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
     margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
    width:100%;
}


.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}

.flex-grow {
    display: flex;
    -webkit-flex: 2;
    flex: 2;
}

希望这会有所帮助。

【讨论】：