时间戳

首页 > 解决方案 > Bootstrap 4 - 使用 align-items-center 时相等的 col 高度

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

问题描述

我正在使用 Bootstrap 4，我正在尝试创建一个所有列都垂直居中的行，为此我正在使用Bootstrap 4 类align-items-center，按照这个 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，但又不是预期的结果。

我觉得我对 flexbox/vertical centering 如何在 Bootstrap 4 中工作缺乏一些基本的了解。

标签： htmlcsstwitter-bootstrapflexboxbootstrap-4

解决方案

问题是您要居中对齐列的内容，而不是列本身。您可以制作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

相关：Bootstrap 4 中的等高列 + 垂直和水平居中内容

推荐阅读