twitter-bootstrap - Bootstrap : CardHeader with buttons on the right

Question

我想要一个卡片标题，左侧有一些文本，右侧有两个按钮。这是我的 html:

<div class="card-header">
<div class="col-md-10">
  <h3 class="w-75 p-3">{{categorie.name}}</h3>
</div>
<div class="col-md-2 float-right">
  <button class="btn btn-primary" (click)="onAddCategoieModal(addCategorieModal)">Add</button>
  <button class="btn btn-primary" style="margin-left: 1em" (click)="onAddCategoieModal(content)">Edit</button>
</div>

但这两个按钮会显示在 h3 下方，如下所示:

有什么想法吗？

Answer 1

另一个 HTML 较少的示例。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />

<h5 class="card-header d-flex justify-content-between align-items-center">
  Title
  <button type="button" class="btn btn-sm btn-primary">Button</button>

  <!-- Wrap with <div>...buttons...</div> if you have multiple buttons -->
</h5>