Contenedor-fluido vs contenedor.

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?

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.

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!

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).

Ú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)

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

.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 .)

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.

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 .