Bootstrap：右侧带按钮的卡片标题头

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下面：

有任何想法吗？

- Jonas

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>

- OzgurG

---

我认为这就是实际将按钮放到右侧而不仅仅使用网格进行间距调整的答案。 - pballs

如果您有多个按钮，您可以将按钮包装在一个 span 中，这种设置仍然有效。 - Jonah

Answer 2

嘿，我认为这就是您想要实现的。我的做法只是在带有card-header div类的容器中添加了container-fluid，并添加了一行来包含您的Bootstrap列，看起来已经解决了问题。

<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。如果它没有完全达到您想要的效果，请说明您还想让它做什么？

- Chris Hitchcock

---

啊，谢谢！我只需要将两个内部div包装在一行中，这样列就能正常工作了。 - Jonas

Answer 3

使用 style 不是最佳实践。

尝试将 float-right 添加到类中。

因此它会像这样：

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

希望对你有所帮助！

- Pontios

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>

另外，您可能希望考虑放弃使用内联 margin，并改用像 ml-1 这样的预定义类。

- Mika Karjunen

Answer 5

只需使用Bootstrap内置的类

         <div class="card">
            <div class="card-header">
              <div class="card-title">Card Title</div>
              <div class="card-tools">
                <button
                  class="btn btn-primary btn-sm"
                >
                  <i className="fa fa-edit"></i>
                </button>
              </div>
            </div>
            <div className="card-body">
              Card Body
            </div>
          </div>

- Munawar Hussian

---

Bootstrap 5 中没有 .card-tools。 - happy_marmoset

Answer 6

在使用 .cols 之前，您需要添加一个 .row div。

<div class="card-header">
  <div class="row">
    ...

- ImTalkingCode

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>

- Jhonatan Serafim

Answer 8

我已经添加了一个带有Bootstrap类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>

- Kiran Mali

Answer 9

你也可以尝试这个

<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>

- Parasmal Prajapati