Contenedor-fluido vs contenedor.


509

Acabo de descargar 3.1 y lo encontré en los documentos ...

Convierta cualquier diseño de cuadrícula de ancho fijo en un diseño de ancho completo cambiando su más externo .containera .container-fluid.

Mirando hacia adentro bootstrap.css, parece que .container-fluides idéntico a .container. Ambos tienen el mismo CSS, y cada instancia de .container-fluidestá emparejada .container, y todas las clases de columnas se especifican en porcentajes.

Al jugar con ejemplos no pude ver ninguna diferencia, ya que todo parecía fluido.

Como soy nuevo en Bootstrap, supongo que me falta algo. ¿Podría alguien tomar un minuto e iluminarme?


44
Yo vi eso. Fue publicado algunas revoluciones atrás. el fluido del contenedor se extrajo para 3.0 y se volvió a agregar para 3.1.
FatFingers

1
@Ranveer Definitivamente no es un duplicado ya que esto se refiere a> BS3 que es BS2.3 - Dado que esa pregunta no responde, ¿podría eliminarla para no confundir a los futuros usuarios?
PW Kad

Desde los documentos, el fluido cubre el ancho de toda la ventana gráfica. (¿o es el de todo el contenedor actual o el elemento que lo contiene?) En cualquier caso, ¿por qué el nombre es fluido? ¿Qué es fluido en oposición al contenedor no fluido?
pashute

Respuestas:


704

Versión rápida: .container tiene un ancho fijo para cada tamaño de pantalla en bootstrap (xs, sm, md, lg); .container-fluidse expande para llenar el ancho disponible.


La diferencia entre containery container-fluidproviene de estas líneas de CSS:

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Dependiendo del ancho de la ventana gráfica en la que se está viendo la página web, la containerclase le da a su div un ancho fijo específico. Estas líneas no existen de ninguna forma container-fluid, por lo que su ancho cambia cada vez que cambia el ancho de la ventana gráfica.

Entonces, por ejemplo, supongamos que la ventana de su navegador tiene 1000 px de ancho. Como es mayor que el ancho mínimo de 992 px, su .containerelemento tendrá un ancho de 970 px. Luego, lentamente amplía la ventana de su navegador. El ancho de tu .containerno cambiará hasta que llegues a 1200px, en el cual saltará a 1170px de ancho y se mantendrá así para cualquier ancho de navegador más grande.

Su .container-fluidelemento, por otro lado, cambiará constantemente de tamaño a medida que realice incluso los cambios más pequeños en el ancho de su navegador.


@jkillian Eso significa que si quiero construir un diseño de ancho completo, debería usar .container-fluidy .containerpara ancho de caja, ¿es correcto?
Hung PD

1
@TheHung Depende exactamente de lo que quieres decir con 'ancho completo', pero container-fluides lo que haría en tu caso, por lo que puedo decir
JKillian

@JKillian Como muchos temas hoy en día, siempre tienen 2 diseños: diseño en caja y ancho. Espero que puedas entender lo que estoy explicando. Perdón por el mal inglés.
Hung PD

@JKillian ¿Qué tal el uso de .container y .container-fluid en algunos casos? Ej .: ( design.davidrozando.com/drew-html-v1.1/… ).
Brightweb

55
@JKillian Entonces, ¿por qué se necesita incluso líquido contenedor?

177

Creo que está diciendo que un containervs container-fluides la diferencia entre receptivo y no receptivo a la cuadrícula. Esto no es cierto ... lo que está diciendo es que el ancho no es fijo ... ¡su ancho completo!

Esto es difícil de explicar, así que veamos los ejemplos


Ejemplo uno

container-fluid:

http://www.bootply.com/119981

Entonces ves cómo el contenedor ocupa toda la pantalla ... eso es un container-fluid.

Ahora veamos al otro de manera normal containery veamos los bordes de la vista previa

Ejemplo dos

container

http://www.bootply.com/119982

¿Ahora ves el espacio en blanco en el ejemplo? Eso es porque es un ancho fijo container! Puede tener más sentido abrir ambos ejemplos en dos pestañas diferentes y cambiar de un lado a otro.

EDITAR

Mejor aún, aquí hay un ejemplo con ambos contenedores a la vez. ¡Ahora realmente puedes notar la diferencia!

http://www.bootply.com/119983

¡Espero que esto haya ayudado a aclarar un poco!


El ejemplo con ambos tipos de contenedores tiene elementos que ambos cambian de ancho.
ahnbizcad

66
Incluso sabiendo cuál es la diferencia, encontré el ejemplo de "ambos" confuso debido al sombreado. Bifurqué su código para hacer lo que podría ser un ejemplo más claro para algunos: bootply.com/119983 (Además, .row-fluid no es necesario en Bootstrap 3. Solo use .row si su contenedor es fluido o no.)
Carl Bussema

Carl, tu enlace va al mismo ejemplo que el original. Si todavía tiene su versión bifurcada, ¿puede publicar el enlace?
Mike T

66
Aquí hay un buen enlace de ejemplo de fork , en caso de que alguien más se encuentre con esto en el futuro.
Mike Collins

Gracias Mike, el otro ejemplo se veían exactamente igual en mi navegador.
eric

169

Ambos .containery .container-fluidson receptivos (es decir, cambian el diseño en función del ancho de la pantalla), pero de diferentes maneras (lo sé, el nombre no lo hace sonar de esa manera).

Respuesta corta:

.container es un cambio de tamaño entrecortado y entrecortado, y

.container-fluid es continuo / cambio de tamaño fino en ancho: 100%.

Desde una perspectiva de funcionalidad:

.container-fluidcambia constantemente de tamaño a medida que cambia el ancho de su ventana / navegador en cualquier cantidad, sin dejar espacio vacío adicional en los lados, a diferencia de cómo lo .containerhace. (De ahí el nombre: "fluido" en lugar de "digital", "discreto", "fragmentado" o "cuantificado").

.containercambia de tamaño en trozos en varios anchos determinados. En otras palabras, serán diferentes anchos específicos, también conocidos como "fijos", diferentes rangos de anchos de pantalla.

Semántica: "ancho fijo"

Puedes ver cómo puede surgir la confusión de nombres. Técnicamente, podemos decir que .containeres "ancho fijo", pero se fija solo en el sentido de que no cambia el tamaño en cada ancho granular. En realidad, no está "fijo" en el sentido de que siempre se mantiene en un ancho de píxel específico, ya que en realidad puede cambiar el tamaño.

Desde una perspectiva fundamental:

.container-fluidtiene la propiedad CSS width: 100%;, por lo que se reajusta continuamente en cada granularidad de ancho de pantalla.

.container-fluid {
  width: 100%;
}

.containertiene algo como "ancho = 800px" (o em, rem, etc.), un valor de ancho de píxel específico en diferentes anchos de pantalla. Esto, por supuesto, es lo que hace que el ancho del elemento salte abruptamente a un ancho diferente cuando el ancho de la pantalla cruza un umbral de ancho de pantalla. Y ese umbral se rige por las consultas de medios CSS3, que le permiten aplicar diferentes estilos para diferentes condiciones, como los rangos de ancho de pantalla.

@media screen and (max-width: 400px){
  .container {
    width: 123px;
  }
}
@media screen and (min-width: 401px) and (max-width: 800px){

  .container {
    width: 456px;
  }
}
@media screen and (min-width: 801px){
  .container {
    width: 789px;
  }
}

Más allá

Puede hacer que cualquier elemento de ancho fijo responda mediante consultas de medios, no solo .containerelementos, ya que las consultas de medios es exactamente cómo .containerse implementa mediante bootstrap en segundo plano (consulte la respuesta de JKillian para el código).


1
¿No es el comportamiento más preciso para .containerAdaptive en lugar de Responsive?
ayjay

@ayjay traes un buen punto. Sería útil contar con términos para distinguir el cambio de tamaño continuo frente al cambio de tamaño variable.
ahnbizcad

1
@ayjay Adaptive detecta el tipo de dispositivo que es el cliente y presenta las cosas del lado del servidor. A Responsive no le importa qué tipo de dispositivo es el cliente; solo le importa el ancho (debido a consultas de medios). Como tal, responsive se representa del lado del cliente (css, javascript). ver huffingtonpost.com/garrett-goodman/… y amberweinberg.com/is-it-adaptive-or-responsive-web-design IMO responsive es mucho más fácil de mantener y construir que tener versiones completamente diferentes de su sitio para diferentes dispositivos. Pero su CSS tiene que dar cuenta de todos los navegadores.
ahnbizcad

@ayj Revisitingng esta cuestión semántica de adaptativo frente a receptivo ... ya que adaptativo significa que está detectando el dispositivo y escupiendo diferentes html / css / js en consecuencia ... es concebible que el html / css / js pueda contener un estilo css de ancho: 100% ;. y puede ser para todos los dispositivos. En tal caso, todo es adaptativo, pero aún así cambia de tamaño de forma continua en lugar de abruptamente ... Por lo tanto, no es semánticamente correcto llamarlo adaptativo frente a receptivo
ahnbizcad

24

Úselo .container-fluidcuando desee que su página cambie de forma con cada pequeña diferencia en el tamaño de su ventana gráfica.

Úselo .containercuando desee que su página cambie de forma a solo 4 tipos de tamaños , que también se conocen como "puntos de interrupción".

Los puntos de interrupción correspondientes a sus tamaños son:

  • Extra pequeño: (solo resolución móvil)
  • Pequeño: 768 px (tabletas)
  • Medio: 992 px (computadoras portátiles)
  • Grande: 1200px (computadoras portátiles / computadoras de escritorio)

11

Actualizado 2019

La diferencia básica es que containerse escala de forma receptiva, mientras container-fluidque siempre es así width:100%. Por lo tanto, en las definiciones CSS de raíz, parecen iguales, pero si observa más allá, verá que .containerestá vinculado a consultas de medios.

Bootstrap 4

El containertiene 5 anchos ...

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Bootstrap 3

El containertiene 4 tamaños. Ancho completo en xspantallas, y luego su ancho varía según las siguientes consultas de medios.

    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    @media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
    }

Demostración de contenedor versus fluido de contenedor


Esto no tiene nada que ver con la pregunta. Buena información pero no relevante aquí.
BeNice

Zim estaba preguntando cuál era la DIFERENCIA entre .container-fluidy .container. Esa era la información que estaba buscando. Su información es interesante, pero cuando vine a buscar la respuesta realmente me confundió por un par de minutos. Si apareciera DESPUÉS de las respuestas que respondieron a la pregunta, eso sería genial, pero SO no parece permitirnos sugerir nuestro propio orden. Y al leer mi comentario original, no estaba tan claro como podría haber estado. Anyhoo gracias por la información.
BeNice

En resumen, .containercambia el ancho de acuerdo con las consultas de los medios y .container-fluidcambia el ancho en tiempo real (de acuerdo con el ancho del puerto de visualización)
Hassan Tareq

6

.containertiene un valor de píxel de ancho máximo, mientras que .container-fluidtiene un ancho máximo de 100%.

.container-fluid cambia continuamente de tamaño a medida que cambia el ancho de su ventana / navegador por cualquier cantidad.

.container cambia el tamaño en fragmentos en varios anchos determinados, controlados por consultas de medios (técnicamente podemos decir que es "ancho fijo" porque se especifican los valores de píxeles, pero si se detiene allí, la gente puede tener la impresión de que no puede cambiar el tamaño, es decir, no responde .)


Parece que el líquido contenedor general es mejor? Más receptivo a los teléfonos móviles, lo cual es una gran cosa en estos días ...

5

Desde la perspectiva de la pantalla, .containerle da más control sobre lo que ven los usuarios, y hace que sea más fácil ver lo que los usuarios verán, ya que solo tiene 4 variaciones de pantalla (5 en el caso de bootstrap 5) porque los tamaños se relacionan con igual que los tamaños de cuadrícula. por ejemplo .col-xs, .col-sm, .col, y .col-lg.

Lo que esto significa es que cuando realiza pruebas de usuario si prueba en una pantalla con los 4 tamaños diferentes, verá todas las verificaciones en la pantalla.

Cuando se usa .container-fluidporque el witdh está relacionado con el ancho de la ventana gráfica, la visualización es dinámica, por lo que las variaciones son mucho mayores y los usuarios con pantallas muy grandes o anchos de pantalla poco comunes pueden ver resultados que no esperaba.


0

Tienes razón en 3.1 .container-fluid y .container son iguales y funcionan como un contenedor, pero si los quitas funcionan como .container-fluid (ancho completo). Habían eliminado .container-fluid para "Mobile First Approach", pero ahora está de vuelta en 3.3.4 (y funcionarán de manera diferente)

Para obtener el último bootstrap, lea esta publicación en stackoverflow, lo ayudará a verificarlo .

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.