Bootstrap 4 - 使用 align-items-center 时相等的 col 高度答案

【问题标题】：Bootstrap 4 - equal col height when using align-items-centerBootstrap 4 - 使用 align-items-center 时相等的 col 高度
【发布时间】：2018-10-13 22:16:39
【问题描述】：

我正在使用 Bootstrap 4，我正在尝试创建一个所有列都垂直居中的行，为此我使用 Bootstrap 4 class align-items-center，按照 this SO answer 中的建议。

我有以下 MWE：

.yellow-row {
  background-color: #f2c14e;
  color: #141823;
}

.blue-col {
  background-color: blue;
  color: white;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <div class="row yellow-row align-items-center">
      <div class="col-lg-7 blue-col text-center">
        <h1>Testing</h1>
        <p>Lorem reiciendis fuga possimus quibusdam doloribus Quos eaque earum voluptatem culpa vel obcaecati, ducimus sed Necessitatibus repudiandae suscipit ipsam magni laudantium? Inventore iusto sequi excepturi voluptatibus totam cupiditate. Dignissimos
          quasi</p>
      </div>
      <div class="col-lg-5 text-center">
        <h1>Only a test</h1>
        <p>Lorem quisquam dolor velit maxime officia. Quos quo nihil sint sequi iste. Sed praesentium nihil illum amet tempora. Dolore exercitationem praesentium iure accusantium quibusdam? Fuga ex inventore dignissimos aut quas</p>
        <p>Lorem dolorum officiis velit deserunt facere? Dolorum provident aliquid sapiente quam perferendis Repellendus magni culpa nesciunt laborum dolorum Pariatur similique ullam quasi sit doloremque cupiditate! Autem odit mollitia libero magnam!</p>
      </div>
    </div>
  </div>
</body>

</html>

上面的 HTML/CSS 在更大的屏幕宽度上产生输出：

预期的结果是蓝色列与父行（因此另一个列）的高度相同。我尝试将min-height: 100% 添加到.blue-col 类，我也尝试过height: 100%，都没有产生预期的结果。我还尝试将 Bootstrap 4 类 h-100 添加到 blue-col，同样不是预期的结果。

我觉得我对弹性盒/垂直居中在 Bootstrap 4 中的工作原理缺乏一些基本的了解。

【问题讨论】：

这个问题已经被问过stackoverflow.com/questions/25145686/…
Let two divs have the same height的可能重复
@Emily7687687 - 问题不在于如何使 cols 具有相同的高度。问题是如何在垂直居中内容的同时保持 cols 相同的高度。

标签： html css twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

问题是您想要居中对齐列的内容，而不是列本身。您可以将 blue-col 设为 flexbox 列 (d-flex flex-column)，然后使用 justify-content-center 对齐其内容...

<div class="container">
    <div class="row yellow-row">
        <div class="col-lg-7 blue-col text-center d-flex flex-column justify-content-center">
            <h1>Testing</h1>
            <p>Lorem reiciendis fuga possimus quibusdam doloribus Quos eaque earum voluptatem culpa vel obcaecati, ducimus sed Necessitatibus repudiandae suscipit ipsam magni laudantium? Inventore iusto sequi excepturi voluptatibus totam cupiditate. Dignissimos
                    quasi</p>
        </div>
        <div class="col-lg-5 text-center">
            <h1>Only a test</h1>
            <p>Lorem quisquam dolor velit maxime officia. Quos quo nihil sint sequi iste. Sed praesentium nihil illum amet tempora. Dolore exercitationem praesentium iure accusantium quibusdam? Fuga ex inventore dignissimos aut quas</p>
            <p>Lorem dolorum officiis velit deserunt facere? Dolorum provident aliquid sapiente quam perferendis Repellendus magni culpa nesciunt laborum dolorum Pariatur similique ullam quasi sit doloremque cupiditate! Autem odit mollitia libero magnam!</p>
        </div>
    </div>
</div>

https://www.codeply.com/go/kSvLCODvZC

【讨论】：

完美，谢谢你，这也是一个很好的解释为什么会出错。对于引导程序来说，课堂上仍然有d-flex flex-column justify-content-center all 似乎很冗长，而这肯定是经常需要的。