如何用Bootstrap原生功能实现card-header内文本左对齐、元素右对齐

用Bootstrap自带的原生工具类就可以实现需求，无需额外编写自定义CSS，以下是两种适配不同版本的通用方案：

方案1：Flex布局方案（适配Bootstrap 4/5，推荐） #

给card-header添加弹性布局相关的自带工具类即可，左右元素自动两端对齐，还可通过垂直对齐类避免错位：

<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span>卡片标题（默认左对齐）</span>
    <div class="header-actions">
      <a href="#" class="btn btn-sm btn-link">详情链接</a>
      <button class="btn btn-sm btn-primary">操作按钮</button>
    </div>
  </div>
  <div class="card-body">
    卡片主体内容
  </div>
</div>

相关类说明：

• d-flex：将card-header设置为弹性布局容器
• justify-content-between：自动让左右子元素两端对齐，左侧留空给标题，右侧放操作元素
• align-items-center：可选类，让左右两侧内容垂直居中，避免元素高度不一致导致的错位
  如果标题内容较长，可给左侧标题添加flex-grow-1类，让标题占满剩余宽度，不挤压右侧操作区域：

<div class="card-header d-flex align-items-center">
  <span class="flex-grow-1">超长的卡片标题内容超长的卡片标题内容超长的卡片标题内容</span>
  <button class="btn btn-sm btn-secondary">操作按钮</button>
</div>

方案2：浮动布局方案（适配Bootstrap 3及更早版本） #

如果使用的是旧版本Bootstrap，可以用自带的浮动工具类实现，注意要把右侧操作元素写在标题前面：

<!-- Bootstrap 4/5 浮动写法 -->
<div class="card-header">
  <button class="btn btn-sm btn-primary float-end">右侧按钮</button>
  <span>卡片标题（默认左对齐）</span>
</div>

<!-- Bootstrap 3 浮动写法 -->
<div class="card-header">
  <button class="btn btn-sm btn-primary pull-right">右侧按钮</button>
  <span>卡片标题（默认左对齐）</span>
</div>

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