html - Bootstrap + Flex + Firefox = 漏洞

Question

我正在尝试使用 this template在 Bootstrap 3 列中使用 Flexbox 实现垂直对齐。但是在 Firefox 中，我得到了带有响应图像的奇怪结果。他们的高度太大，不成比例，超过 100%。你可以查看this JSFiddle在 Firefox (35) 中。

CSS
.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items 
                              horizontally within the column  */
}
HTML
<div class="container">
  <div class="row vertical-align">
    <div class="col-xs-6">
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,</p>
    </div>
    <div class="col-xs-6">
      <img src="http://placehold.it/1400x1000" class="img-responsive" />
    </div>
  </div>
</div>

有什么办法可以解决这个问题吗？

Answer 1

很明显，“img-responsive”类和 Firefox 并不总是相处融洽。您可以通过向类添加 width: 100% 来解决此问题:

.img-responsive {
  width: 100%;
}