如何用Bootstrap水平对齐h3与h5标题（尽量不自定义CSS）

嘿，我来帮你搞定这个标题对齐的问题！既然要求优先用Bootstrap原生样式，咱们完全不用写额外CSS就能实现h3和h5在同一行对齐的效果，下面给你两种实用的方法：

方法一：Flex布局工具类（最灵活） #

Bootstrap自带的flex工具类可以快速实现行内对齐，还能保证标题垂直居中，代码示例如下：

<div class="row ">
  <div class="col-md-4 ">
    <!-- First Name 与 Address 1 组 -->
    <div class="d-flex align-items-center mb-3">
      <h3 class="mb-0">First Name</h3>
      <h5 class="mb-0 ms-3">Address 1</h5>
    </div>
    <!-- Last Name 与 Address 2 组 -->
    <div class="d-flex align-items-center">
      <h3 class="mb-0">Last Name</h3>
      <h5 class="mb-0 ms-3">Address 2</h5>
    </div>
  </div>
</div>

关键类说明：

• d-flex：将容器设置为flex布局，让内部元素同行排列
• align-items-center：让两个标题垂直居中对齐，避免因为字号不同导致错位
• mb-0：移除h3、h5默认的底部外边距，避免容器出现多余间距
• ms-3：给h5添加左侧间距（可根据需求替换成ms-2/ms-4等调整间距大小）

方法二：嵌套网格系统（适合规整列分配） #

如果希望两个标题各自占据固定宽度的列，用嵌套的row和col类也能轻松实现：

<div class="row ">
  <div class="col-md-4 ">
    <!-- First Name 与 Address 1 组 -->
    <div class="row align-items-center mb-3">
      <div class="col-auto">
        <h3 class="mb-0">First Name</h3>
      </div>
      <div class="col">
        <h5 class="mb-0">Address 1</h5>
      </div>
    </div>
    <!-- Last Name 与 Address 2 组 -->
    <div class="row align-items-center">
      <div class="col-auto">
        <h3 class="mb-0">Last Name</h3>
      </div>
      <div class="col">
        <h5 class="mb-0">Address 2</h5>
      </div>
    </div>
  </div>
</div>

关键类说明：

• 嵌套row：在原有col内创建新的行布局
• col-auto：让h3所在列自适应内容宽度，不占用多余空间
• col：让h5所在列占据剩余宽度，适合需要标题右侧内容自适应的场景
• align-items-center：同样保证两个标题垂直居中

这两种方法都完全依赖Bootstrap原生样式，不需要修改任何自定义CSS，完美符合你的需求～

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