Bootstrap导航栏导航项如何与大尺寸logo底部或居中对齐

解决方案 #

你当前导航项对齐异常的核心原因是nav标签上加了align-items-start类，这个Bootstrap工具类会强制flex容器的所有子元素沿顶部对齐，刚好你logo尺寸更大，所以文字类导航项就会集中在左上角区域。你可以根据自己的需求选择以下两种修改方案：

方案1：所有导航项与logo居中对齐 #

1. 把nav标签class属性里的align-items-start替换为align-items-center
2. 删除navbar-brand标签上的内联样式align-self:flex-end，避免和全局对齐规则冲突

修改后的核心代码示例：

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3 align-items-center">
    <img src="~/resources/images/projectLogo.jpg" alt="St Mary School" style="margin: 10px 10px 10px 10px">
    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Lesson School Project</a>
    <!-- 后续按钮、导航列表等代码保持不变 -->
</nav>

方案2：所有导航项与logo底部对齐 #

1. 把nav标签class属性里的align-items-start替换为align-items-end
2. 同样删除navbar-brand标签上的align-self:flex-end内联样式

如果需要更精细的位置调整，可以给导航项的容器（navbar-collapse、navbar-toggler）加Bootstrap的margin类微调，比如加mt-2就是上移2个单位间距，mt-3就是上移3个单位，不需要额外写自定义CSS。

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