如何将Bootstrap 5行内两列内容沿同一基线对齐

Bootstrap 5 原生提供了Flex对齐工具类，无需编写大量自定义CSS即可实现两列内容基线对齐，可选方案如下：

方案1：使用Bootstrap内置工具类（推荐） #

给外层 row 容器添加 align-items-baseline 类即可，修改后的HTML代码如下：

<div class="row align-items-baseline">
  <div class="col-md-2" style="border: 1px solid; border-color: #FFFFFF;">
   <i class="fas fa-mobile-alt fa-2x" style="color: #FFFFFF;"></i>
  </div>
  <div class="col-md-10" style="border: 1px solid; border-color: #FFFFFF;">
   <span class="p-phone">Telefono e fax: +39 123456789</span>
  </div>
 </div><!-- end row -->

原理：Bootstrap的row默认是Flex容器，align-items-baseline 会强制所有子列的内容沿文本基线对齐，刚好匹配需求。

方案2：自定义CSS实现 #

如果不想修改HTML标签类，也可以给对应行添加自定义样式：

/* 给目标row添加自定义类名如.phone-row后使用如下样式 */
.phone-row {
  align-items: baseline;
}

如果对齐后仍有细微偏差，可以给图标标签添加少量垂直偏移调整：

.fa-mobile-alt {
  vertical-align: -2px; /* 可根据实际显示效果调整数值 */
}

内容的提问来源于stack exchange，提问作者P.Davide