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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/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

嘿，我相信这就是您要实现的目标。我所做的就是用您的卡片标题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 3

另一种选择是使用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>

另外，您可能要考虑放弃predefined class的行内边距，例如ml-1。

Answer 4

使用movie不是最佳做法。

尝试将style添加到课程中。

所以它就像：

float-right

希望有帮助！

Answer 5

我还添加了一个带有引导类float-right和cols的div，使其响应。

<div class="card text-secondary border-primary mb-3">
  <div class="card-header">
    <div class="row">
      <div class="col-md-9">
        <h3>blog title</h3>
      </div>
      <div class="col-md-3">
        <div class="float-right">
          <button class="btn text-success mr-1">Add</button>
          <button class="btn text-danger">Delete</button>
        </div>
      </div>
    </div>
  </div>
  <div class="card-body">
    <p class="card-text">blog content</p>
  </div>
</div>

Answer 6

您还将尝试

<div class="card-header container-fluid">
 <div class="col-md-10">
        <h3 class="w-75 p-3">{{category.name}}</h3>
    </div>
    <div class="col-md-2 float-right">
        <button class="btn btn-primary" (click)="onAddCategoryModal(addCategoryModal)">add</button>
        <button class="btn btn-primary" style="margin-left: 1em" (click)="onAddCategoryModal(content)">edit</button>
    </div>
    </div>

Answer 7

答案对我没有帮助。所以，我试过这个：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12">
  <div class="card">
    <article class="card-body">
      <div>
        <button type="button" class="btn btn-sm btn-primary mt-3 mr-2"
              style="position: absolute; top: 0; right: 0">
          Button
        </button>
        <h5 class="card-title text-center">Title</h5>
      </div>
    </article>
  </div>
</div>

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

7 个答案: