在 Bootstrap 4.1 中将 col 文本与背景颜色垂直居中对齐

Question

这是实际工作的代码在中间对齐文本：

<div class="container section-content">
    <div class="row" style="border-radius: 4px; border: solid 1px #979797;">
        <div class="col-md-3 align-self-center" style="background-color: #4a90e2">
            Align
        </div>
    </div>
</div>

但这是输出： 所需的输出应该用背景颜色填充整个左列。

我如何实现这一目标？

编辑：不是如何使 Bootstrap 列的高度相同？ 这是垂直对齐的问题

Answer 1

尝试这个：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-3 d-flex justify-content-center align-items-center" style="background-color: #4a90e2;">
      Align
  </div>
  <div class="col-md-9">
    <div class="p-2 bd-highlight">Flex item 1</div>
    <div class="p-2 bd-highlight">Flex item 2</div>
    <div class="p-2 bd-highlight">Flex item 3</div>
    <button type="button" class="btn btn-primary">Primary</button>
  </div>
</div>