另一个使用较少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>

嘿，我相信这就是你想要达到的目的，我所做的只是把container-fluid和你的card-header div一起添加到类中，然后我添加了一行来包含你的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，如果这不是你想要的，你能澄清一下你还想要它做什么吗？

使用style不是最佳做法。
尝试将float-right添加到类中。
就像这样：

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

希望能有所帮助！

另一个选择是使用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）的内联边距。

只需使用引导内置类

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

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

您还将尝试以下操作

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

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

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

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

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