MAUI Blazor实现Android风格底部图标导航栏显示异常求助

问题描述 #

在MAUI Blazor中实现固定在底部、图标在上文字在下的标签栏，代码在网页环境中显示正常，但实际运行时布局错乱，元素排列不符合预期。

现有代码 #

NavMenu.razor

<nav class="navbar navbar-dark navbar-expand fixed-bottom bg-dark justify-content-center">
<div class="container-fluid">
    <ul class="navbar-nav nav-justified w-100 text-center">
        <li class="nav-item">
            <NavLink class="nav-link d-flex flex-column" href="" Match="NavLinkMatch.All">
                <i class="bi bi-house-fill" aria-hidden="true"></i>
                <span>Home</span>
            </NavLink>
        </li>
        <li class="nav-item">
            <NavLink class="nav-link d-flex flex-column" href="book">
                <i class="bi bi-calendar-check-fill" aria-hidden="true"></i>
                <span>Book</span>
            </NavLink>
        </li>
        <li class="nav-item">
            <NavLink class="nav-link d-flex flex-column" href="profile">
                <i class="bi bi-person-fill" aria-hidden="true"></i>
                <span>Profile</span>
            </NavLink>
        </li>
        <li class="nav-item">
            <NavLink class="nav-link d-flex flex-column" href="settings">
                <i class="bi bi-gear-fill" aria-hidden="true"></i>
                <span>Settings</span>
            </NavLink>
        </li>
    </ul>
</div>
</nav>

MainLayout.razor

<div class="page">
<NavMenu />

<main>
    <article class="content px-4">
        @Body
    </article>
</main>
</div>

问题原因与修复方案 #

核心原因 #

MAUI Blazor默认模板的全局样式（如page、content类的内边距/外边距）与Bootstrap导航栏样式存在冲突，同时navbar-expand类会触发移动端折叠逻辑，导致布局异常。

具体修复步骤 #

1. 调整主布局内边距，避免内容被底部栏遮挡
   修改MainLayout.razor的content类，添加底部内边距：

<div class="page">
<NavMenu />

<main>
    <article class="content px-4 pb-10"> <!-- 根据标签栏高度调整pb值 -->
        @Body
    </article>
</main>
</div>

2. 优化导航栏Bootstrap类，移除折叠属性
   删除navbar-expand类，同时调整导航项的布局样式，确保图标文字垂直排列：

<nav class="navbar navbar-dark fixed-bottom bg-dark">
<div class="container-fluid">
    <ul class="navbar-nav nav-justified w-100 text-center">
        <li class="nav-item">
            <NavLink class="nav-link d-flex flex-column align-items-center py-2" href="" Match="NavLinkMatch.All">
                <i class="bi bi-house-fill mb-1" aria-hidden="true"></i> <!-- 添加间距让图标文字更协调 -->
                <span class="small">Home</span>
            </NavLink>
        </li>
        <!-- 其余导航项按同样格式修改 -->
    </ul>
</div>
</nav>

3. 确认Bootstrap Icons资源引入
   检查wwwroot/index.html中是否已正确引入Bootstrap Icons的CSS文件：

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">

4. 自定义CSS覆盖默认样式（可选）
   若仍有布局问题，在wwwroot/css/app.css中添加以下样式：

/* 确保导航项垂直布局生效 */
.nav-link.d-flex.flex-column {
    align-items: center;
    justify-content: center;
}

/* 固定底部导航栏高度 */
.navbar.fixed-bottom {
    height: 60px;
    padding: 0.5rem 0;
}

效果验证 #

修改后重新运行项目，标签栏会正常显示：图标位于文字上方，均匀分布在页面底部，内容区域不会被遮挡。

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