如何在Bootstrap卡片内实现<h3>标签与关闭按钮/图标同行对齐？

嘿，我完全懂你在Bootstrap卡片布局里遇到的头疼事儿——不管是[close]按钮还是后来换的关闭图标，都没法和<h3>好好待在同一行，图标还跑到了行底。别担心，用Bootstrap内置的flex工具类就能轻松搞定，不用写一堆自定义CSS！

核心方案：用Flex容器实现水平+垂直对齐 #

Bootstrap的flex布局工具类是解决这类对齐问题的最优解，只要把标题和关闭元素放进同一个flex容器里，就能轻松实现你要的效果：

示例1：标题与[close]按钮同行 #

<div class="card">
  <!-- 给卡片头部套flex容器 -->
  <div class="card-header d-flex justify-content-between align-items-center">
    <h3 class="mb-0">你的卡片标题</h3>
    <button type="button" class="btn btn-outline-secondary btn-sm">
      [close]
    </button>
  </div>
  <div class="card-body">
    卡片内容区域...
  </div>
</div>

示例2：标题与关闭图标同行（解决图标居底问题） #

<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <h3 class="mb-0">你的卡片标题</h3>
    <!-- 带图标的关闭按钮，也可以直接用图标加点击事件 -->
    <button type="button" class="btn btn-close" aria-label="Close">
      <i class="bi bi-x-lg"></i> <!-- 这里用Bootstrap Icons举例，替换成你用的图标即可 -->
    </button>
  </div>
  <div class="card-body">
    卡片内容区域...
  </div>
</div>

关键类的作用说明 #

• d-flex：把容器转换成flex布局，让内部元素从垂直排列变成横向排列
• justify-content-between：让标题和关闭元素分别贴紧容器的左右两端，自动拉开合理间距
• align-items-center：强制内部元素垂直居中，彻底解决图标跑到行底的问题，让它和<h3>的中线对齐
• mb-0：移除<h3>默认的底部外边距，避免flex容器内出现多余的垂直空隙

如果标题和图标不在card-header里？ #

要是你想把标题和图标放在card-body内，方法完全一致——给包裹它们的父容器加上d-flex align-items-center就行：

<div class="card">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h3 class="mb-0">你的卡片标题</h3>
      <i class="bi bi-x" style="cursor: pointer;"></i>
    </div>
    <!-- 其他卡片内容 -->
  </div>
</div>

这样调整后，不管是按钮还是图标，都能稳稳和<h3>待在同一行，再也不会出现错位啦！

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