0

Cree un navbar con un dropdown, y dentro del mismo en el 'div, dropdown-menu' en lugar de colocar solo dropdown-items cree una 'card' y coloque el contenido en el card-body, me gusto el resultado pero el problema es que no entiendo porque el meno del dropdown esta siempre activado, no sube ni baja sino que siempre se esta mostrando, y esto tambien causa que los elementos del navbar se desplacen, aqui el codigo ( el dropdown de la pregunta esta en: li class="nav-item dropdown" ):

<nav class="navbar navbar-expand-xl navbar-light" style="background-color: #fff;" id="navbarid">
    <div class="container d-flex">
        <a class="navbar-brand d-xl-none" href="#">
            Shopping.
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link" data-toggle="dropdown" href="#">Home</a>
                    <div class="dropdownmenu">
                        <div class="card">
                            <div class="card-body">
                                <ul class="list-styled">
                                    <li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
                                    <li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
                                    <li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
                                    <li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
                                    <li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
                                    <li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
                                    <li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</a></li>
                                    <li class="list-styled-item dropdown-item"><a class="list-styled-link" href="#">default</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>
                <li class="nav-item">
                    <a class="nav-link" href="#">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Docs</a>
                </li>
            </ul>
            <a class="navbar-brand d-none d-xl-block mx-auto" href="#">
                Shopping.
            </a>
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link text-body dropdown-toggle" dropdown-toggle="dropdown">United States</a>
                    <div class="dropdownmenu">
                        <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>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">USD</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">EN</a>
                </li>
            </ul>
            ...
2
  • Sería más fácil tratar de ayudar si proporcionas un ejemplo verificable es.stackoverflow.com/help/minimal-reproducible-example
    – Triby
    Commented el 31 ene. 2020 a las 19:37
  • Bienvenido a SOes, un título tiene la idea general, título != descripción, considera este un posible título más adecuado para tu pregunta: "Animar Bootstrap Card en dropdown".
    – fredyfx
    Commented el 31 ene. 2020 a las 20:21

1 respuesta 1

2

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.

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>
3
  • 1
    ¿Cómo ayuda esta respuesta a solucionar el problema del OP? Por favor visita ¿Cómo escribo una buena respuesta? Commented el 31 ene. 2020 a las 20:06
  • @JheymanMejia alli ya mejorada, gracias
    – Richi
    Commented el 31 ene. 2020 a las 20:14
  • ya cambie el codigo como tu sugieres, parte del problema se arrelo, creo que principalmente era porque estaba escribiendo la clase "dropdown-menu" como "dropdownmenu". Ya el dropdown esta oculto, el problema ahora es que no se muestra la "card" al oprimir el enlace, osea el dropdown-menu no se muestra, como si no funcionara @ricardoleivasikic
    – Davidasd
    Commented el 10 feb. 2020 a las 17:30

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.