0

estoy usando Bootstrap v4.6. Cómo puedo hacer para que mi submenu desplegable (está en un div) quede del mismo ancho que su div padre. Así es como queda y así es como necesito que quede. Intenté haciendo:

#dropMenuSm {
    width: 100vw;
  }

pero esto me coge el ancho del viewport y yo necesito que me quede con el ancho del div padre. Les agradezco su ayuda.

Full código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
<nav class="navbar navbar-expand-lg navbar-light d-flex px-0 bg-dark">
  <a class="navbar-brand bg-dark text-white pl-2 mr-auto p-2" href="/"><img src="" alt=""/><span class="px-3">Something</span></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">
    <div class="ml-auto">
      <ul class="navbar-nav">
        <li class="nav-item dropdown align-self-center position-relative px-lg-3 d-none d-lg-block" id="appsDropdown">
          <a class="nav-link" href="/#" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">APPS<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown align-self-center text-center position-relative d-lg-none d-xl-none" style="cursor: pointer;">
          <a class="nav-link dropdown-toggle" id="navbarDropMobile" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">APPS<span class="sr-only">(current)</span></a>
          <div class="dropdown-menu text-center border-0 bg-primary" id="dropMenuSm" aria-labelledby="navbarDropMobile">
            <a class="dropdown-item-text text-decoration-none text-dark display-4 font-weight-light itemAppsMobile" href="/#">APP1</a>
            <a class="dropdown-item-text text-decoration-none text-dark display-4 font-weight-light itemAppsMobile" href="/#">View All</a>
        </div>
        </li>
        <li class="nav-item align-self-center px-lg-3">
          <a class="nav-link" href="/">BLOG</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-success text-white m-2 my-2 px-lg-3" href="/#">TRY</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
  </body>
</html>

4
  • 1
    acceso denegado, acceso denegado... por favor agrega tu código completo y luego explica el problema con el código tuyo.
    – Excorpion
    Commented el 14 may. 2021 a las 20:42
  • 1
    Además para obtener el tamaño del ancho del contenedor padre, debes usar porcentaje... 100%
    – Excorpion
    Commented el 14 may. 2021 a las 20:46
  • He agregado tú código a fragmento para poder visualizar el resultado y entender un poco mejor lo que deseas hacer. Commented el 14 may. 2021 a las 21:42
  • En tu elemento <li> del dropdown, sólo elimina la clase .align-self-center. Eso debería funcionar. Revisa: getbootstrap.com/docs/4.6/utilities/flex/#align-self Commented el 14 may. 2021 a las 21:54

2 respuestas 2

1

La solución adecuada es como lo sugiere @jheyman-mejia , quitar la clase align-self-center en <li class="nav-item dropdown text-center position-relative d-lg-none d-xl-none" style="cursor: pointer;">

Por favor verifica si este es el resultado deseado:

<style>

.align-self-center {
    width: -webkit-fill-available;
}

li {
    display: list-item;
    text-align: center;
}

</style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
<nav class="navbar navbar-expand-lg navbar-light d-flex px-0 bg-dark">
  <a class="navbar-brand bg-dark text-white pl-2 mr-auto p-2" href="/"><img src="" alt=""/><span class="px-3">Something</span></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">
    <div class="ml-auto">
      <ul class="navbar-nav">
        <li class="nav-item dropdown position-relative px-lg-3 d-none d-lg-block" id="appsDropdown">
          <a class="nav-link" href="/#" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">APPS<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown text-center position-relative d-lg-none d-xl-none" style="cursor: pointer;">
          <a class="nav-link dropdown-toggle" id="navbarDropMobile" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">APPS<span class="sr-only">(current)</span></a>
          <div class="dropdown-menu text-center border-0 bg-primary" id="dropMenuSm" aria-labelledby="navbarDropMobile">
            <a style="widt:100%" class="dropdown-item-text text-decoration-none text-dark display-4 font-weight-light itemAppsMobile" href="/#">asda sd APP1</a>            <hr>
            <a class="dropdown-item-text text-decoration-none text-dark display-4 font-weight-light itemAppsMobile" href="/#">View asd asd  All</a>
        </div>
        </li>
        <li class="nav-item align-self-center px-lg-3">
          <a class="nav-link" href="/">BLOG</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-success text-white m-2 my-2 px-lg-3" href="/#">TRY</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
  </body>
</html>

4
  • No es buena idea reemplazar las clases del framework, mejor de paso quítalas y ya Commented el 14 may. 2021 a las 22:12
  • Totalmente de acuerdo. Commented el 14 may. 2021 a las 22:36
  • He modificado mi respuesta de acuerdo a tu sugerencia, muchas gracias @JheymanMejia Commented el 14 may. 2021 a las 22:46
  • Hola @elierickdevelopment revisaré tu aporte y te comento. Muchas gracias
    – viforv
    Commented el 18 may. 2021 a las 13:00
0

Otra forma que encontré hubiese sido hasta el viewport que se hubiese necesitado pero creo que me quedaré con la solución dada por @elierickdevelopment:

.nav-item.dropdown {
    width: 100%;
  }

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.