引导卡片头中的5内容左右浮动不起作用

Question

我有一张用引导带5制作的卡片。

基本上，我试图在卡片头的左边得到一个标题，在卡片标题的右边有一组按钮，所以这就是我所做的：

<div class="card-header">
  <div class="float-start">
    <h3>title</h3>
  </div>
  <div class="float-end">
    <button class="btn btn-primary">Add</button>
    <button class="btn btn-primary">Edit</button>
  </div>
  </div>

由于某些原因，标题和按钮不在标题中。

我如何正确地使用Bootstrap 5来完成这个任务？

Answer 1

所有card-*类都需要一个直接父类card类才能正常工作。将代码更改为：

<div class="card">
  <div class="card-header">
    <div class="float-start">
      <h3>title</h3>
    </div>
    <div class="float-end">
      <button class="btn btn-primary">Add</button>
      <button class="btn btn-primary">Edit</button>
    </div>
  </div>
</div>