0

No entiendo la diferencia entre un div común y un div de clase container-fluid. La documentación oficial de la sección "Containers"solo hace referencia a que el container-fluid tiene un width de 100% en todos los "breakpoints" (es decir, lo mismo que un div común según entiendo). Sin embargo, al mirar el ejemplo de los NAVBAR en dicha documentación observamos el siguiente código:

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Si eliminamos la clase container-fluid de la línea 2, dejando al DIV como uno común, observaremos un cambio importante. Dejando el código tal cual está, todos los elementos de la NAVBAR se encuentran alineados en una sola linea y en cambio, al eliminar la clase "container-fluid" se observa que arriba queda la "Navbar-Brand", cuyo texto es "NavBar", y abajo los links que componen la "unordered list". La pregunta es: ¿Que es lo que está haciendo realmente el container-fluid además de permitir que el width de dicho elemento ocupe el 100% en todas las posiciones -cosa que según entiendo ya ocurre sin agregar esta clase-? Adjunto fotos para ilustrar (la primera es de como se ve sin modificar el código de la documentación y la segunda es como se vería eliminando el container-fluid)

Foto de código sin modificar Foto de código modificado

1 respuesta 1

3

Si abres el css de bootstrap y buscas container-fluid verás que tan solo aparece dos veces.

A saber:

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

y esta otra:

.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}

Como puedes apreciar, en la primera aparece el width: 100% que mencionas, y otras propiedades de CSS.

Pero en la segunda, que es cuando además cuelga de un navbar, hace más cosas:

  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;

Por lo tanto, no es exactamente lo mismo un <div> sin clases que uno que esté usando la clase container-fluid, ni dentro ni fuera del navbar.

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.