0

Estoy desarrollando una página web y el toggler del navbar no despliega la barra de navegación, probé importando Bootstrap mediante cdn, de forma local y ninguna funciono. Parecería ser un problema de JavaScript pero no logro encontrar nada, y de paso, las clases ml-auto y mr-auto no me funcionan tampoco. Por cierto, estoy utilizando Bootstrap 5. (Editada)

Mi HTML:

<!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!--  Bootstrap  -->
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
        <script src="js/bootstrap/bootstrap.bundle.min.js"></script>

        <!--  Navbar  -->
        <link rel="stylesheet" href="css/navbar-styles.css">
        <link rel="stylesheet" href="css/custom_styles.css">
        <script src="js/navbar.js"></script>
        <title>Wayr@ Pymes</title>

        <!--  Icono  -->
        <link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
    </head>
    <body>
      <header>
        <div class="navigation-wrap start-header start-style">
          <nav class="navbar navbar-expand-md">
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="brand brand-name">
              <a class="navbar-brand mr-auto" href="#">
                <img src="images/Icono.png" class="d-inline-block align-text-top navbar-image">
                Wayr@ Pymes
              </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                  <a class="nav-link" href="#">Inicio</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">[email protected]</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contacto</a>
                </li>
              </ul>
            </div>
          </nav>        
        </div>
        <div class="container-fluid">
          <div class="row">
            <div class="col-12 presentacion">
              <h1>WAYR@ PYMES</h1>
            </div>
          </div>
        </div>
      </header>
    </body>
</html>

Muchas gracias por su tiempo.

7
  • Importante: ¿qué versión de Bootstrap estás utilizando? Pareciera ser Bootstrap 5.
    – padaleiana
    Commented el 17 ago. 2021 a las 14:20
  • @padaleiana Hola, sí, estoy utilizando bootstrap 5, ya lo agregué al cuerpo de la pregunta Commented el 17 ago. 2021 a las 14:31
  • Te muestra algún error en la consola???
    – Israel-ICM
    Commented el 17 ago. 2021 a las 14:35
  • Me lanza estos dos errores: index.html:75 GET file:///D:/Luca%20Elbio/Proyectos/wayra.pymes/.../ net::ERR_FILE_NOT_FOUND index.html:1 GET file:///D:/Luca%20Elbio/Proyectos/wayra.pymes/.../ net::ERR_FILE_NOT_FOUND Probé con los CDN de Bootstrap 4.6 del ejemplo de Israel y si funciona, debe ser algo de Bootstrap 5 Commented el 17 ago. 2021 a las 14:40
  • 1
    Hola @Daniel Popper no hace falta incluirlo a partir de Bootstrap 5, ya que viene incluido en el archivo bootstrap.bundle.min.js (o eso es lo que investigué) Commented el 17 ago. 2021 a las 14:43

1 respuesta 1

7

¡Documentación de migración a Bootstrap v5 al rescate!


Como podés fijarte en la sección Utilities, se renombraron los .ml-* y .mr-* por .ms-* y .me-* (left -> start; right -> end).

Además, en la sección Javascript, se menciona lo siguiente (énfasis mío):

Los atributos de datos* para todos los plugins de JavaScript tienen ahora un espacio de nombres** para ayudar a distinguir la funcionalidad de Bootstrap de la de terceros y de tu propio código. Por ejemplo, utilizamos data-bs-toggle en lugar de data-toggle.

* atributos de datos: data-*.
** espacio de nombres: traducción no-sé-si-muy-correcta de namespace.

Por lo tanto, en tu código nada más hay que reemplazar data-toggle por data-bs-toggle y data-target por data-bs-target.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!--  Bootstrap  -->
  <!-- ### comentado del código original ###
  <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
  <script src="js/bootstrap/bootstrap.bundle.min.js"></script>-->

<!--  ### agregado para reproducir ejemplo ###  -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

  <!--  Navbar  -->
  <link rel="stylesheet" href="css/navbar-styles.css">
  <link rel="stylesheet" href="css/custom_styles.css">
  <script src="js/navbar.js"></script>
  <title>Wayr@ Pymes</title>

  <!--  Icono  -->
  <link rel="shortcut icon" type="image/png" href="images/favicon.png" />
</head>

<body>
  <header>
    <div class="navigation-wrap start-header start-style">
      <nav class="navbar navbar-expand-md">
        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

        <div class="brand brand-name">
          <a class="navbar-brand me-auto" href="#">
            <img src="images/Icono.png" class="d-inline-block align-text-top navbar-image"> Wayr@ Pymes
          </a>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Inicio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">[email protected]</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contacto</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-12 presentacion">
          <h1>WAYR@ PYMES</h1>
        </div>
      </div>
    </div>
  </header>
  <!--  ### agregado para reproducir ejemplo ###  -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>

</html>

Observación no menor: No se lo ve, pero el toggler está a la izquierda :)

1
  • 2
    Muchísimas gracias!! Respuesta super completa y muchisima data que sirve un monton! Commented el 18 ago. 2021 a las 12:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.