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

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>