Bootstrap4按钮与表格顶部间距及右对齐问题解决

两步快速解决： #

• 给包含标题和按钮的.table-title容器添加Bootstrap内置底部间距类，实现按钮区域与表格的分隔
• 给按钮所在的列添加flex布局+右对齐类，让按钮紧贴表格右侧边缘

修改后的完整代码： #

<div class="container">
  <div class="table-title mb-3"> <!-- 添加mb-3类设置底部间距 -->
    <div class="row">
      <div class="col-sm-8"><h5>Birds</h5></div>
      <div class="col-sm-4 d-flex justify-content-end"> <!-- 添加flex类实现按钮右对齐 -->
        <button type="button" class="btn btn-info add-new">
          <i class="fa fa-plus"></i> Add New
        </button>
      </div>
    </div>
  </div>

  <table class="table">
    <thead class="table-light">
      <tr>
        <th>Name</th>
        <th>Sex</th>
        <th>Status</th>
        <th>Owner</th>
        <th>IIS</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let bird of birds$ | async">
        <td>bird</td>
        <td>sex</td>
        <td>status</td>
        <td>owner</td>
        <td>IIS</td>
        <td>
          <a style="padding-left:10px;"><fa-icon [icon]="iconEdit"></fa-icon></a>
          <a style="padding-left:10px;"><fa-icon [icon]="iconTrash"></fa-icon></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

关键类说明： #

• mb-3：Bootstrap间距工具类，设置margin-bottom: 1rem，可根据需求换成mb-2（更小间距）或mb-4（更大间距），适配不同布局
• d-flex + justify-content-end：把列转为flex容器，让内部按钮靠右对齐，完美贴合表格右侧边缘

这种方式完全利用Bootstrap内置类，无需自定义CSS，既符合框架规范，又能保证响应式布局的一致性，比手动添加空白行更可靠。

内容的提问来源于stack exchange，提问作者Ray Bond