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>

结果：

有什么办法可以使右侧列的高度与左侧的相等吗？

- Run

---

你试过了吗：http://getbootstrap.com.vn/examples/equal-height-columns/？- 顺便说一句，字体很漂亮。 - Yates

@ThomasYates 是的，我试过了，但不起作用... - Run

你需要将CSS实际添加到你的代码中。它不在原始的Bootstrap中。我已经发布了一个答案。 - Yates

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>

这就是了。这是最干净、最官方的方法。

- Yates

---

使用这个解决方案会在两个子div中都产生额外的空间。有什么办法可以去掉这个空间吗？ - Aalind Sharma

@AalindSharma，你能提供一段代码片段或者截图吗？我不明白你的意思。 - Yates

这种样式会影响较小的分辨率，意味着在移动分辨率下，列不会彼此排列。 - Bogdan C

@media (min-width: 768px) { .row-eq-height { display: flex; flex-wrap: wrap; } } - Bogdan C

Answer 2

尝试这个：

检查演示在这里

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; */
}

- Jyoti Pathania

---

在这个解决方案中，图像div出现了一些额外的空间，是否有可能去掉这个空间？ - Aalind Sharma