Container-fluid vs .container

Acabo de descargar 3.1 y encontré en los documentos …

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

Buscando en bootstrap.css , parece que .container-fluid es idéntico a .container . Ambos tienen el mismo CSS, y cada instancia de .container-fluid está emparejada con .container , y todas las clases de columna están especificadas en porcentajes.

Cuando jugaba con ejemplos, no podía ver ninguna diferencia, ya que todo parecía fluido.

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

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


La diferencia entre container y container-fluid proviene 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á visualizando la página web, la clase container le da a su div un ancho fijo específico. Estas líneas no existen en ninguna forma para 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 es de 1000 píxeles de ancho. Como es mayor que el ancho mínimo de 992px, su elemento .container tendrá un ancho de 970px. Luego, lentamente, amplías la ventana de tu navegador. El ancho de su .container no cambiará hasta que llegue a 1200px, en el cual saltará a 1170px de ancho y se mantendrá de esa manera para cualquier ancho de navegador más grande.

.container-fluid otro lado, su elemento .container-fluid cambiará de tamaño constantemente a medida que realiza los cambios más pequeños en el ancho de su navegador.

Creo que estás diciendo que un container versus un container-fluid es la diferencia entre receptivo y no receptivo a la red. Esto no es verdad … lo que está diciendo es que el ancho no es fijo … ¡es ancho!

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 … es un container-fluid .

Ahora veamos el otro como un container normal y veamos los bordes de la vista previa

Ejemplo dos

container

http://www.bootply.com/119982

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

EDITAR

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

http://www.bootply.com/119983

¡Espero que esto haya ayudado a aclarar un poco!

Tanto .container como .container-fluid responden (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 cambio de tamaño nervioso / picado, y

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

Desde una perspectiva de funcionalidad:

.container-fluid cambia el tamaño continuamente a medida que cambia el ancho de su ventana / navegador en cualquier cantidad, sin dejar ningún espacio vacío adicional en los lados, a diferencia de cómo .container hace .container . (De ahí la denominación: “fluido” en lugar de “digital”, “discreto”, “fragmentado” o “cuantificado”).

.container cambia el tamaño en trozos de varios anchos determinados. En otras palabras, serán diferentes anchos específicos “fijos” diferentes gamas de anchos de pantalla.

Semántica: “ancho fijo”

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

Desde una perspectiva fundamental:

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

 .container-fluid { width: 100%; } 

.container tiene algo así como “ancho = 800px” (o em, rem, etc.), un valor de ancho de píxel específico a 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 de 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 sea receptivo a través de consultas de medios, no solo elementos .container , ya que las consultas de medios son exactamente cómo .container se implementa mediante arranque en segundo plano (consulte la respuesta de JKillian para el código).

Utilice .container-fluid cuando desee que su página .container-fluid forma con cada pequeña diferencia en el tamaño de su ventana gráfica.

Utilice .container cuando desee que su página .container de forma a solo 4 tipos de tamaños , que también se conocen como “puntos de interrupción”.

Los puntos de corte correspondientes a sus tamaños son:

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

Actualizado 2018

Bootstrap 4

El container tiene 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 container tiene 4 tamaños. El ancho total en las pantallas xs , y luego su ancho varía en función de 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; } } 

contenedor versus demostración de contenedor fluido

.container tiene un valor de píxel de ancho máximo, mientras que .container-fluid es de 100% de ancho máximo.

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

.container cambia el tamaño en trozos de 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 receptivo)

Desde una perspectiva de visualización, el .container le brinda más control sobre lo que los usuarios ven y facilita la visualización de lo que verán los usuarios, ya que solo tiene 4 variaciones de visualización (5 en el caso de arranque 5) porque los tamaños se relacionan al igual que los tamaños de rejilla. por ejemplo, .col-xs , .col-sm , .col y .col-lg .

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

Al usar .container-fluid porque witdh está relacionado con el ancho de la ventana gráfica, la pantalla 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 inesperados.

Tiene razón en 3.1. El fluido contenedor y el .container son los mismos y funcionan como contenedores, pero si los elimina funciona como .container-fluid (full width). Habían eliminado .container-fluid para “Mobile First Approach”, pero ahora está de regreso en 3.3.4 (y funcionarán de manera diferente)

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