Bootstrap网格系统 - 如何制作两个高度相等的列？

Question

如何在Bootstrap网格列中创建两个具有相同高度的列？

.item-text {
  padding: 30px !important;
  /* Flex center. */
  display: flex;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  border: 1px solid blue !important;
}
.item-text .item-center {
  align-self: center;
  margin: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-xl-4 col-lg-6 col-sm-12">
  <div class="col-sm-6">
    <img src="http://placehold.it/400x600" class="img-responsive" alt="" />
  </div>
  <div class="col-sm-6 item-text">
    <div class="item-center">
      <h3 class="heading item-heading">(Title) Ways of Something</h3>
      <p class="item-contributor">John Berger</p>
      <p class="item-description">(Short description) Remix-remake of John Berger’s 1972 BBC documentary, Ways of Seeing</p>
    </div>
  </div>
</div>

结果：

任何想法如何使右栏的高度与左栏的高度相等？

Answer 1

将以下代码添加到CSS中：

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

然后在希望列具有相同高度的行上使用该类：

<div class="row row-eq-height">
    <div class="col-lg-6"></div>
    <div class="col-lg-6"></div>
</div>

就是这样。这是最干净，更官方的做法。

Answer 2

试试这个：

检查演示 HERE

HTML：

<div class="row row-height">

  <div class="col-sm-6">
    <img src="http://placehold.it/400x600" class="img-responsive" alt="" />
  </div>
  <div class="col-sm-6 item-text">
    <div class="item-center">
      <h3 class="heading item-heading">(Title) Ways of Something</h3>
      <p class="item-contributor">John Berger</p>
      <p class="item-description">(Short description) Remix-remake of John Berger’s 1972 BBC documentary, Ways of Seeing</p>
    </div>
  </div>

</div>

CSS：

.row-height {
  display: flex;
}

.item-text {
  padding: 30px !important;
  /* Flex center. */
  display: flex;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  border: 1px solid blue !important;
}

.item-text .item-center {
  /*  align-self: center;
    margin: auto; */
}