css - medidas - secciones bootstrap

¿Por qué Bootstrap 3 fuerza el ancho del contenedor a ciertos tamaños?

Question

Si mi navegador tiene un tamaño de 992px de ancho, entonces .container tiene un ancho máximo de 970px. Si mi navegador tiene un tamaño de 991px de ancho, entonces .container tiene un ancho máximo de 750px. ¿Por qué hay este gran salto en el ancho máximo? ¿Por qué no tener un ancho máximo de 1170px o más con 20px de margen en cada lado o algo así para que al cambiar el tamaño de la ventana del navegador, el ancho del contenedor se amplíe sin problemas en lugar de tener un gran salto?

Por ejemplo, con un ancho de pantalla de 992px, tengo muy poco margen en cada lado (11px). Sin embargo, con 991px de ancho, tengo 120px de margen en cada lado, lo que significa que casi el 25% del espacio de la pantalla está vacío en los laterales. Esto no tiene mucho sentido para mí. ¿Hay alguna razón para esto? ¿Puedo eliminar este comportamiento de preferir ciertos anchos de contenedor sin romper cosas?

Answer 1

Así es como funcionan Bootstrap y sus redes. Bootstrap define 4 cuadrículas, consulte getbootstrap.com/css/#grid-options . Dependiendo del tamaño de la pantalla, se usará una de estas cuatro cuadrículas. El ancho de la pantalla 992px es el punto de corte entre la cuadrícula pequeña y la mediana.

Las rejillas se ajustan horizontalmente y se desplazan verticalmente como estamos acostumbrados . Por esta razón, la cuadrícula más pequeña se aplicará debajo de 992px.

El ancho máximo del contenedor se puede "calcular" al encontrar qué ancho puede contener 12 columnas de ancho igual más canaletas. Para la cuadrícula pequeña, 12 x 60 hacen 720. El relleno está construido con 15 píxeles en ambos lados de la columna, menos 2 x 15 píxeles en el exterior de la cuadrícula. Esos píxeles faltantes (construidos con un margen negativo) hacen 720 + (2 x 15) = 750.

750 px parece muy pequeño en relación con el 991px que mencionaste. La rejilla pequeña está pensada para su uso en dispositivos con un ancho de pantalla de 768px y la cuadrícula media para anchos de pantalla de 992px.

Answer 2

Esto se debe a que ancho fijo + margen = punto de corte. En bootstrap, el margen crece mientras el contenedor permanece en un ancho fijo. Cuando el navegador se resize pasado el punto de ruptura, el contenedor salta justo debajo del punto de ruptura.

Answer 3

La respuesta oficial de la gente de Bootstrap:

Lo que se reduce a eso es que diseñar para puntos de corte específicos es más fácil (en mi mente) que diseñar tamaños ilimitados y desconocidos. La alternativa que mencionas no es incorrecta o mala, simplemente diferente. Prefiero que mantengamos los niveles con rangos muy específicos

Answer 4

solía

.container {
    max-width: 100%;
}

en Bootstrap 4, y eso me lo quitó. Tenga cuidado al aplicar eso globalmente sin embargo. Puede hacer esto para contenedores específicos en su lugar:

.container.some-specific-class {
    max-width: 100%;
}

<div class="container some-specific-class">
  xyz...
</div>

Gracias a Dorian por el consejo inicial.