Выравнивание меню - выпадающий список с пунктами меню

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;
}