twitter bootstrap - right - La barra de navegación de arranque MVC no funciona después de ejecutar las actualizaciones de NuGet

navbar toggler icon

Question

Una aplicación MVC se rompió después de actualizar todos los paquetes de NuGet. Después de probar todo, creé una nueva aplicación MVC, actualicé los paquetes de NuGet y la barra de navegación básica ...

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Application name</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li><a href="/Home/About">About</a></li>
                <li><a href="/Home/Contact">Contact</a></li>
            </ul>

<ul class="nav navbar-nav navbar-right">
    <li><a href="/Account/Register" id="registerLink">Register</a></li>
    <li><a href="/Account/Login" id="loginLink">Log in</a></li>
</ul>


        </div>
    </div>
</div>

... Se ve como esto ...

... y haciendo clic en el icono ...

¿Alguna idea de que puede estar causando esto?

Han intentado agregar manualmente Bootstrap.css y Bootstrap.js a _Layout.vbhtml, pero no hay diferencia

Gracias

Answer 1

Finalmente, manejé mi HTML y el tuyo. Hay muchos cambios en Bootstrap 4 en comparación con la versión 3. En cuanto a su marca, tiene que cambiar:

1. "Navbar-inversa" a "Navbar-dark" y utilice el color "bg-dark".
2. Agregue pocos atributos al botón, como "aria-controles", "aria-expandido", "aria-label" y "data-target" para enlazar a otro elemento.
3. Propiedad "id" al elemento colapsable.
4. Para los elementos de la lista (etiqueta LI) se debe agregar class = "nav-item"
5. Para los enlaces, los elementos de la lista unside agregan class = "nav-link".
6. Sugiero agregar "mr-auto" a la lista de definiciones.

Todos los cambios a continuación. Probado here .

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    </button>
    <a class="navbar-brand" href="/">Application name</a>
    <div class="navbar-collapse collapse" id="navbarSupportedContent">
      <ul class="nav navbar-nav mr-auto">
        <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="/Home/About" class="nav-link">About</a></li>
        <li class="nav-item"><a href="/Home/Contact" class="nav-link">Contact</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right mr-auto">
        <li class="nav-item"><a href="/Account/Register" id="registerLink" class="nav-link">Register</a></li>
        <li class="nav-item"><a href="/Account/Login" id="loginLink" class="nav-link">Log in</a></li>
      </ul>

    </div>
  </div>
</nav>

Answer 2

Gracias Drac, gran respuesta. Para un botón de "hamburguesa" como en la versión 3.3, agregue este código:

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

Answer 3

Gracias jon Probé el código y funciona bien.

Después de agregar el atributo HTML al enlace de acción en las listas, la acción de índice estaba en rojo; de alguna manera, MVC no pudo encontrar el método de índice. Agregué "null" después del controlador "Home" y se fue. Publicándolo aquí, para que alguien pueda beneficiarse de ello.

@ Html.ActionLink ("Inicio", "Índice", "Inicio", nulo, nuevo {@class = "nav-link"}) @ Html.ActionLink ("Acerca de", "Acerca de," Inicio ", nulo, nuevo {@class =" nav-link "}) @ Html.ActionLink ("Contacto", "Contacto", "Inicio", nulo, nuevo {@class = "nav-link"})

Answer 4

Gracias, Drac. Gran respuesta.

Para cualquier persona que quiera el código Razor, aquí está el mío:

[EDITAR: El código incluye los cambios sugeridos por @Suhani y @Sagi / @Doug Dekker

Esto es _Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
        @Html.ActionLink("My Web Portal", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        <div class="navbar-collapse collapse" id="navbarSupportedContent">

            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", null, new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("About", "About", "Home", null, new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home", null, new { @class = "nav-link" })</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</nav>

<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

y esto es _LoginPartial.cshtml

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
    @Html.AntiForgeryToken()
    <ul class="nav navbar-nav navbar-right mr-auto">
        <li class="nav-item">@Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })</li>
        <li class="nav-item"><a href="javascript:document.getElementById(''logoutForm'').submit()">Log off</a></li>
    </ul>
}
}
else
{
    <ul class="nav navbar-nav navbar-right mr-auto">
    <li class="nav-item">@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink", @class = "nav-link" })</li>
    <li class="nav-item">@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class = "nav-link" })</li>
    </ul>
}

Answer 5

Llegué tarde, pero espero que esto ayude a alguien ya que este problema fue una lucha para mí.

Mi toolbar se cerró después de actualizar de v3 a v4 . No funcionó hasta que tuve las referencias necesarias enumeradas a continuación. Tenga en cuenta que son referencias locales, pero deben ser similares a su proyecto.

<!DOCTYPE html>
<html>
<head>
   <!-- Latest compiled and minified CSS -->
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <!-- jQuery library -->
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <!-- Popper JS -->
    <script src="~/Scripts/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="~/Scripts/bootstrap.bundle.min.js"></script>
</head>
</html>
  

Answer 6

Lo que está causando el problema es que Bootstrap 4 no puede reconocer las clases de Bootstrap 3, y Bootstrap 3 es lo que ASP .NET usa en este momento. Solo baje la calificación a Bootstrap 3.3.7 de NuGet y estará listo.

Answer 7

Simplemente desinstale los módulos actualizados. Estoy bastante seguro de que es Antlr Package y Bootstrap. Baje los grados a 3.4.1 y 3.3.0 respectivamente. Esto ayudó a mi problema.

Answer 8

Todas las respuestas anteriores son asombrosas.

Mi solución es temporal y más corta: desinstale bootstrap y reinstale la versión anterior.

En la consola del administrador de paquetes: para desinstalar, escriba esto: uninstall-package bootstrap

Una vez hecho esto, reinstale la versión anterior que funcionó, por ejemplo: install-package bootstrap -Version 3.3.7