如何让Bootstrap导航栏元素处于同一行且高度对齐？

你的导航栏元素出现行内不对齐、高度不一致的问题，核心原因是中间列表项里的<i>标签没有应用Bootstrap的nav-link类，导致它无法继承导航项统一的内边距、行高和垂直对齐样式。

修正后的代码 #

<nav class="navbar navbar-expand-lg">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">HOME</a>
        </li>
        <li class="nav-item">
            <span class="nav-link"><i class="fa-solid fa-chevron-right"></i></span>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">CATEGORY</a>
        </li>  
    </ul>
</nav>

关键说明 #

• 给箭头图标外层添加带nav-link类的<span>（如果是可点击链接也可以用<a>），让它和前后的导航链接保持一致的布局样式；
• 移除了"CATEGORY"文本后的多余空格，避免不必要的宽度偏移；
• nav-link类自带的内边距、行高属性会自动让所有导航项在垂直方向对齐，保证高度统一。

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