Bootstrap导航栏Nav-items偏移对齐问题求助

从你的代码和描述来看，导航项无法对齐的核心原因是Open Iconic图标（<span class="oi">）与文字的垂直对齐方式不一致，导致整体导航项高度偏移。以下是几种可行的修复方案：

方案1：强制图标与文字垂直居中 #

给.oi类添加垂直对齐样式，让图标和文字处于同一基线：

.oi {
    vertical-align: middle;
}

将这段CSS添加到wwwroot/css/site.css或组件的<style>块中即可生效。

方案2：用Flex布局统一导航项内部对齐 #

给.nav-link设置Flex布局，强制内部元素居中对齐，同时还能灵活调整图标与文字的间距：

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 可选：给图标和文字添加间距 */
}

这种方式兼容性更强，能确保导航项在不同设备和浏览器中都保持对齐。

方案3：核对资源版本兼容性 #

确保你使用的Bootstrap（4/5）与Open Iconic版本匹配，部分旧版本的图标样式可能和Bootstrap导航栏布局存在冲突。如果是Blazor模板自带的资源通常无需调整，若自行引入资源则建议核对版本一致性。

修改后的组件示例（添加内联样式） #

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
    <div class="container-fluid">
        <a class="navbar-brand" href="">feonao</a>
        <button class="navbar-toggler @NavButtonCssClass" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
                aria-controls="navbarCollapse" aria-label="Toggle navigation" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse @NavBarCssClass" id="navbarCollapse" @onclick="ToggleNavMenu">
            <ul class="navbar-nav me-auto mb-2 mb-md-0">
                <li class="nav-item">
                    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                        <span class="oi oi-home" aria-hidden="true"></span> Home
                    </NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" href="music">
                        <span class="oi oi-media-play" aria-hidden="true"></span> Music
                    </NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link" href="video">
                        <span class="oi oi-video" aria-hidden="true"></span> Video
                    </NavLink>
                </li>
            </ul>
        </div>
    </div>
</nav>

<style>
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
</style>

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