引导程序：CardHeader，右侧有按钮

Question

我想要一个Cardheader，左边有一些文本，右边有两个按钮。这是我的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>
</h5>

Answer 2

使用style不是最佳实践。

尝试添加float-right到类中。

所以它会像：

<button class="btn btn-primary float-right (click)="onAddCategoieModal(content)">Edit</button>

希望能帮助到你！

Answer 3

嘿，我相信这是您要完成的工作。我所做的就是使用您的卡片标题div将容器流体添加到类中，然后添加一行以包含您的引导程序列，并且它似乎已经解决了问题。

<div class="card-header container-fluid">
  <div class="row">
    <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>
  </div>
</div>

这是一个codepen。如果这不能完全满足您的要求，您能否说明您还想要做什么？

Answer 4

另一种选择是使用flex。这可能是一个更清洁的解决方案。

<div class="card-header">
  <div class="d-flex align-items-center">
    <h3 class="mr-auto p-3">{{categorie.name}}</h3>
    <div class="btn-group" role="group">
      <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>
  </div>
</div>

此外，您可能需要考虑为诸如 ml-1 之类的预定义类放弃该内联边距。