twitter bootstrap - secciones - Contenedor fluido vs. Contenedor
secciones bootstrap (8)
Creo que está diciendo que un container vs container-fluid es la diferencia entre receptivo y no receptivo a la red. 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
Así que ya ves cómo el contenedor ocupa toda la pantalla ... eso es un container-fluid .
Ahora veamos el otro solo un container normal y veamos los bordes de la vista previa
Ejemplo dos
container
¿Ahora ves el espacio en blanco en el ejemplo? Eso es porque es un container ancho fijo! Podría 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!
Espero que esto ayude a aclarar un poco!
Acaba de descargar la versión 3.1 y se encuentra en los documentos ...
Convierta cualquier diseño de rejilla de ancho fijo en un diseño de ancho completo cambiando su
.containerexterno 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 se especifican en porcentajes.
Cuando jugueteaba con ejemplos, no podía ver ninguna diferencia, ya que todo parecía fluido.
Como soy nuevo en Bootstrap, asumo que me estoy perdiendo algo. ¿Podría alguien tomarse un minuto e iluminarme?
Desde la perspectiva de la pantalla .container le da más control sobre lo que ven los usuarios y hace que sea más fácil ver lo que verán los usuarios ya que solo tiene 4 variaciones de pantalla (5 en el caso de bootstrap 5) porque los tamaños se relacionan Al 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 realiza pruebas en pantallas con los 4 tamaños diferentes, verá todas las verificaciones en pantalla.
Cuando se usa .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 con anchos de pantalla poco comunes pueden ver resultados que no esperaba.
Tanto .container como .container-fluid responden (es decir, cambian el diseño según el ancho de la pantalla), pero de diferentes maneras (lo sé, la denominación no hace que suene de esa manera).
Respuesta corta:
.container está .container tamaño / .container , y
.container-fluid es redimensionamiento continuo / fino en ancho: 100%.
Desde la perspectiva de la funcionalidad:
.container-fluid cambia continuamente 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 .container hace .container . (De ahí la denominación: "fluido" en lugar de "digital", "discreto", "fragmentado" o "cuantizado").
.container cambia de tamaño en trozos en varios anchos determinados. En otras palabras, serán diferentes anchos específicos "aka" 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 .container es "ancho fijo", pero se fija 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 como "ancho = 800px" (o em, rem, etc.), un valor de ancho de píxel específico en diferentes anchos de pantalla. Por supuesto, esto es lo que hace que el ancho del elemento salte bruscamente 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 a través de consultas de medios, no solo de elementos .container , ya que las consultas de medios es exactamente cómo .container es implementado por bootstrap en segundo plano (consulte la respuesta de JKillian para el código).
Tiene razón en 3.1. -Contenador-fluido y .El contenedor es el mismo y funciona como un contenedor, pero si lo quita, funciona como .Container-fluido (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 la última versión de arranque, lea esta publicación en que ayudará a comprobarlo .
Use .container-fluid cuando quiera que su página .container-fluid forma con cada pequeña diferencia en el tamaño de su ventana gráfica.
Use .container cuando desee que su página .container de forma solo a 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: 1200px (Laptops / Desktops)
.container tiene un valor de píxel de ancho máximo, mientras que .container-fluid es max-width 100%.
.container-fluid cambia continuamente de tamaño a medida que cambia el ancho de su ventana / navegador en cualquier cantidad.
.container cambia de tamaño en trozos 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í, las personas pueden tener la impresión de que no puede cambiar el tamaño, es decir, no responde.)
Actualizado 2018
Bootstrap 4
El container tiene 5 anchuras ...
.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 completo en las pantallas xs , 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;
}
}
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á viendo 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 de container-fluid , por lo que su ancho cambia cada vez que cambia el ancho de la ventana gráfica.
Entonces, por ejemplo, digamos que la ventana de su navegador tiene 1000px de ancho. Como es mayor que el ancho mínimo de 992 píxeles, su elemento .container tendrá un ancho de 970 píxeles. A continuación, ensancha lentamente la ventana de su navegador. El ancho de su .container no cambiará hasta que llegue a 1200px, en el que saltará a 1170px de ancho y permanecerá así para cualquier ancho de navegador más grande.
.container-fluid otro lado, su elemento .container-fluid , cambiará de tamaño constantemente a medida que realice los cambios más pequeños en el ancho de su navegador.