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="#">wayr@.pymes</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
    el 17 ago. 2021 a las 14:20
  • @padaleiana Hola, sí, estoy utilizando bootstrap 5, ya lo agregué al cuerpo de la pregunta el 17 ago. 2021 a las 14:31
  • Te muestra algún error en la consola???
    – Israel-ICM
    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 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é) 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/bootstrap@5.0.0/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="#">wayr@.pymes</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/bootstrap@5.0.0/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! el 18 ago. 2021 a las 12:19

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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