Я использую Bootstrap 4, я пытаюсь создать строку, в которой все столбцы центрированы вертикально, для этого я использую класс Bootstrap 4 align-items-center, как согласно рекомендации в этот SO ответ .
У меня есть следующие 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 / вертикальное центрирование в Bootstrap 4.