菜单对齐-下拉菜单项与菜单项不符

Question

我是ASP.Net Core的新手-我从昨晚开始真正使用它。

我正在为一个朋友在一个网站上工作，他要求页面顶部菜单栏的布局非常具体：

首页|关于|书与故事▼|评论|其他项目

在编写我认为应该具有此功能的代码时，会得到以下提示：

我的代码在这里：

<ul class="navbar-nav flex-grow-1">
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="About">About</a>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle text-dark" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Books and Stories <span class="caret"></span></a>
        <ul class="dropdown-menu text-dark">
            <li><a asp-controller="BooksAndStories" asp-action="Novels">Novels</a></li>
            <li><a asp-controller="BooksAndStories" asp-action="Stories">Short Stories</a></li>
            <li><a asp-controller="BooksAndStories" asp-action="WIP">WIP</a></li>
        </ul>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Reviews" asp-action="Index">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="OtherProjects" asp-action="Index">About</a>
    </li>
</ul>

有人可以给我一些指导吗？ Google没什么用。

谢谢

Carthax

Answer 1

在.dropdown-toggle下的bootstrap.css文件中修改wwwroot/lib/bootstrap/dist/css，如下所示：

.dropdown-toggle {
    white-space: nowrap;
    display: block;
    padding: 0.5rem 1rem;
}