引导程序中的统一垂直拉伸单列内容

Question

我试图让几个按钮垂直拉伸到容器的大小，但我不知道我以前是怎么做到的。我已经尝试了https://getbootstrap.com/docs/4.0/utilities/flex/ 上的所有可能性（如 align-items-stretch、align-self-stretch、align-content-stretch，但似乎没有一个对单列垂直拉伸有任何作用，至少我是如何实现它们的. 怎么做的？谢谢！

(https://codepen.io/jasonws/pen/poyYMpz)

<div class="container mt-3">
  <div class="d-flex align-content-stretch border" style="height:150px; width:200px; flex-direction: column">
    <button type="button" class="btn btn-primary my-1">Flex item 1</button>
    <button type="button" class="btn btn-primary my-1">Flex item 2</button>
    <button type="button" class="btn btn-primary my-1">Flex item 3</button>
  </div>
</div>

Answer 1

只需从 d-flex 类中删除其他内容

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
  <div class="border" style="display: grid">
    <button type="button" class="btn btn-primary my-1 m-2">Flex item 1</button>
    <button type="button" class="btn btn-primary my-1 m-2 ">Flex item 2</button>
    <button type="button" class="btn btn-primary my-1 m-2 ">Flex item 3</button>
  </div>
</div>