Android（底部）风格导航栏，MAUI blazor 上带有图标

Answer 1

我可以重现您的问题，这是因为导航栏使用默认的NavMenu.razor.css。您可以通过更改默认的 css 样式来修复它。

1. 使第一个导航项与其他导航项位于同一行：

打开NavMenu.razor下面的NavMenu.razor.css，删除以下代码：

.nav-item:first-of-type {
        padding-top: 1rem;
    }

2. 使点击效果包含文字：

打开 NavMenu.razor 下面的 NavMenu.razor.css，然后更改导航项的高度：

.nav-item ::deep a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 5rem;<!-- old value is 3rem -->
    display: flex;
    align-items: center;
    line-height: 3rem;
}

结果图像：