Bootstrap 5 卡片标题中的内容左右浮动不起作用

Question

我有一张使用 Bootstrap 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>