2

En Bootstrap 4 se define: <nav class="navbar ... y la barra de navegación ocupa todo el ancho de la pantalla al igual que los elementos. Y si definimos el <nav> dentro de un div="container", bootstrap le da margenes laterales.

Yo quiero que mi menú ocupe lo que define el div="container" pero que la barra del <nav> ocupe todo el ancho de la pantalla.

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav text-center">
      <a class="nav-item nav-link" href="#">Inicio</a>
      <a class="nav-item nav-link" href="#">Servicios</a>
      <a class="nav-item nav-link" href="#">Contacto</a>
    </div>
  </div>
</nav>
1
  • a ver si entendi quieres que el nav ocupe todo el ancho de la pag y que lo que contiene el nav solo hasta donde va el container? Commented el 19 dic. 2017 a las 22:17

1 respuesta 1

3

Simplemente debes agregar el div.container dentro de la estructura de tu nav y así tus botones quedaran en ese ancho que deseas sin afectar el fondo.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav text-center">
        <a class="nav-item nav-link" href="#">Inicio</a>
        <a class="nav-item nav-link" href="#">Servicios</a>
        <a class="nav-item nav-link" href="#">Contacto</a>
      </div>
    </div>
  </div>
</nav>

2
  • 1
    No puedo creer que la solución haya estado frente a mi todo este tiempo.
    – Puntay
    Commented el 19 dic. 2017 a las 22:25
  • 1
    @Piropeator muchas veces creemos que como Bootstrap nos provee una estructura entonces esa estructura no la podemos "romper" o modificar, pero realmente si se hace de la manera correcta si se puede, te invito a marcar la respuesta como aceptada para que sea de ayuda a próximos desarrolladores, saludos! Commented el 19 dic. 2017 a las 22:27

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.