Blazor .NET 8 中的水平导航栏未对齐

Question

我正在尝试在 ASP.NET Core 8 Blazor 网站中使用 Bootstrap NavBar。我正在使用 Bootstrap 5.x。这样做时，菜单项不会按预期水平排列，下拉菜单也不起作用。对于我需要使用的菜单结构，带有子菜单布局的侧面菜单无法按要求工作。为了保持简短，我没有包含子菜单。

我确实需要将菜单放置在页面顶部。

页面图片：

MainLayout.razor

：

@inherits LayoutComponentBase

<PageTitle>BlazorApp</PageTitle>

<div class="page"> 
    <main>
    <NavMenu/> 
    <article class="content px-8">
    @Body
    </article>
    </main>
</div>

NavMenu.razor

：

<nav class="navbar navbar-expand navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                </li>
            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

如有任何建议，我们将不胜感激。

谢谢

我尝试使用如上所示的

<li class="nav-item">

标签，以及不将它们包装在

nav-item

类中，并在

<a>

类中使用

Nav-link

标签

<a class="nav-link" href="#">Features</a> 

Answer 1

检测页面元素后，发现

<ul>

标签和

dropdown

代码，影响了布局。

由于与 bootstrap 的深度集成，我必须以不同的方式思考并避免使用这些标签元素。

测试结果

<nav class="navbar navbar-expand navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-nav me-auto mb-2 mb-lg-0">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link" href="#">Link</a>
                <div class="dropdown">
                    <a class="nav-link dropdown-toggle" href="#">Dropdown</a>
                    <div class="dropdown-content">
                        <a href="#option1">Option 1</a>
                        <a href="#option2">Option 2</a>
                        <a href="#option3">Option 3</a>
                    </div>
                </div>
                <a class="nav-link disabled" aria-disabled="true">Disabled</a>
            </div>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

<style>
    /* For dropdown select */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown-content a:hover {
        background-color: #ddd;
    }

    .dropdown:hover .dropdown-toggle {
        background-color: #3e8e41;
    }

</style>