Soy nuevo en ASP.Net Core, literalmente comencé a jugar con él anoche.

Estoy trabajando en un sitio web para un amigo y solicitó un diseño muy específico para la barra de menú en la parte superior de la página:

Inicio | Acerca de | Libros e historias ▼ | Reseñas | Otros proyectos

Cuando codifico lo que creo que debería ser esta funcionalidad, obtengo esto:

enter image description here

Mi código está aquí:

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

¿Alguien puede darme alguna dirección? Google ha sido menos útil.

Gracias

Carthax

0
Carthax 3 oct. 2019 a las 03:54

1 respuesta

La mejor respuesta

Modifique .dropdown-toggle en el archivo bootstrap.css en wwwroot/lib/bootstrap/dist/css como se muestra a continuación:

.dropdown-toggle {
    white-space: nowrap;
    display: block;
    padding: 0.5rem 1rem;
}
0
Xueli Chen 3 oct. 2019 a las 02:08