Bootstrap 5列表项添加按钮后文本垂直错位如何解决

问题原因 #

给.list-group-item添加d-flex类开启弹性布局后，弹性容器默认的垂直对齐规则为stretch，无标签包裹的纯文本作为匿名行内盒子，和自带默认边距、行高的btn按钮进行基线对齐时就会出现垂直错位的问题。

解决方案 #

方案1：使用内置工具类（无需额外新增标签，修改成本最低） #

直接在列表项的class属性中追加Bootstrap自带的align-items-center类，让弹性容器内的所有子元素统一垂直居中对齐即可解决错位。修改后的列表项代码示例：

<li class="list-group-item d-flex justify-content-between align-items-center">Admins
    <button class="btn btn-sm btn-outline-secondary" type="button">View</button>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Custom
    <button class="btn btn-sm btn-outline-secondary" type="button">Edit</button>
</li>

方案2：文本包裹span标签处理（即你提到的稳妥方案） #

如果后续需要给文本单独加样式，可先把列表项内的文本包裹在span标签中，再配合对齐类实现垂直居中：

<li class="list-group-item d-flex justify-content-between align-items-center">
    <span>Admins</span>
    <button class="btn btn-sm btn-outline-secondary" type="button">View</button>
</li>

如果不想给列表项加全局垂直居中类，也可以单独给span和按钮加align-self-center类实现相同效果。

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