Skip to main content
mejorada respuesta
Origen Enlace
Richi
  • 867
  • 9
  • 31

Hola pude replicar un pocopor lo que veo en tu ejemplo esperocodigo hecho has pasado por alto 2 cosas, en la linea donde tu codigo es:

     <a class="nav-link" data-toggle="dropdown" href="#">Home</a>
     <div class="dropdownmenu">

lo que vi fue que te sirva como quedo. Aquifaltaron algunos atributos propios de bootstrap para que este funcione de manera correcta, te dejoadjunto la linea corregida.

 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown
 </a>
 <div class="dropdown-menu" aria-labelledby="navbarDropdown">

Ademas podrias chequear si la instalacion de bootstrap esta bien hecha, ya que algunas veces pasa que no toman los archivos Js por lo que ciertas funcionalidades como el link https://www.codeply.com/p/oIg62Hg6ANmenu responsivo no funcionen.

Hola pude replicar un poco tu ejemplo espero te sirva como quedo. Aqui te dejo el link https://www.codeply.com/p/oIg62Hg6AN

por lo que veo en tu codigo hecho has pasado por alto 2 cosas, en la linea donde tu codigo es:

     <a class="nav-link" data-toggle="dropdown" href="#">Home</a>
     <div class="dropdownmenu">

lo que vi fue que te faltaron algunos atributos propios de bootstrap para que este funcione de manera correcta, te adjunto la linea corregida.

 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown
 </a>
 <div class="dropdown-menu" aria-labelledby="navbarDropdown">

Ademas podrias chequear si la instalacion de bootstrap esta bien hecha, ya que algunas veces pasa que no toman los archivos Js por lo que ciertas funcionalidades como el menu responsivo no funcionen.

Origen Enlace
Richi
  • 867
  • 9
  • 31

Hola pude replicar un poco tu ejemplo espero te sirva como quedo. Aqui te dejo el link https://www.codeply.com/p/oIg62Hg6AN

Version bootstrap: 4.1.3

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="#">Navbar</a>
          <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>
        
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <div class="card">
                    <div class="card-body">
                        <ul class="list-styled">
                            <li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">United States</a></li>
                            <li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">Latin America</a></li>
                            <li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">Asia</a></li>
                        </ul>
                    </div>
                </div>
                </div>
              </li>
        
                <li class="nav-item">
                    <a class="nav-link" href="#">Catalog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pages</a>
                </li>
            </ul>
        
          </div>
        </nav>