none
Actualización Bootstrap de 3.0 a 4.1 No se ve el menu principal. RRS feed

  • Pergunta

  • Hola:

    En mi proyecto de ASE.Net MVC he actualizado mi proyecto de Bootstrap 3.0 a 4.1 y no se visualiza bien la página, el menu inicial no sale. En la imagen de abajo podeis ver como se ve el menú ahora, no tiene que ver nada con el menu que normalemnte se mostraba.

    Me estoy volviendo loco con las referencias css y js, y no doy con ello.

    Un Saludo.

    domingo, 22 de abril de 2018 16:17

Todas as Respostas

  • hola

    desde el developer tool del browser (al cual accedes con F12) no visualzas ningun error de javascript? a veces un error javascript afecta los estilo

    sino usa esa misma tool para inspeccionar el html

    validaste en la doc si el menu se implementa de la misma forma en ambas versiones?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    segunda-feira, 23 de abril de 2018 17:41
  • Eso pasa porque el proyecto predeterminado de Visual Studio no es compatible con Bootstrap 4, para ello, debes cambiar el _layout para que luzca de la siguiente manera:

    <!DOCTYPE html>
    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
       <title>@ViewBag.Title - Mi aplicación ASP.NET</title>
       @Styles.Render("~/Content/css")
       @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
       <div class="navbar navbar-expand-sm navbar-light bg-light">
          <div class="container">
             <div class="navbar-header">
                <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("Nompre del Proyecto", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
             </div>
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                   <li>@Html.ActionLink("Inicio", "Index", "Home", new { @class = "nav-link" })</li>
                   <li>@Html.ActionLink("Acerca de", "About", "Home", new { @class = "nav-link" })</li>
                   <li>@Html.ActionLink("Contacto", "Contact", "Home", new { @class = "nav-link" })</li>
                </ul>
             </div>
          </div>
       </div>
       <div class="container body-content">
          @RenderBody()
          <hr />
          <footer>
             <p>&copy; @DateTime.Now.Year - Mi Aplicación ASP</p>
          </footer>
       </div>
       @Scripts.Render("~/bundles/jquery")
       @Scripts.Render("~/bundles/bootstrap")
       @RenderSection("scripts", required: false)
    </body>
    </html>

    En bootstrap 4, muchas clases cambiaron de nombre, al igual que la forma en que se generan los link (ente otras muchas cosas)

    quarta-feira, 19 de fevereiro de 2020 13:29