asp.net-core - 菜单对齐 - 下拉菜单项与菜单项不一致

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>

谁能给我一些方向？谷歌一直没那么有用。

谢谢，

卡萨克斯

标签： asp.net-coremodel-view-controller

Answer 1

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

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