html - ordenar - sistema de rejillas bootstrap 4

Cuadrícula Bootstrap 3, ¿realmente importa la cantidad de columnas en una fila?

Question

Tengo un diseño de formulario que tiene grupos de formulario bootstrap 3 en él. Quiero estos grupos de formularios en una sola columna en <pequeña, 2 columnas en el tamaño de tableta y 4 columnas en pantallas más grandes.

Parece que funciona perfectamente, sin embargo, después de leer algo aquí, lo que hice viola la supuesta regla de que cada columna en una fila debe sumar hasta 12. Sin embargo, todos los tutoriales y documentos que pude encontrar siempre usan palabras comadrejas como "debería" o "idealmente" al decir que debería sumar hasta 12. No parece haber una guía clara aquí.

Definí mis grupos así:

<div class="row">
    <div class="form-group col-md-6 col-lg-3" ><!--....etc-->

y actualmente tengo 4 de estos en cada fila. Esto significa que el 4 * col-lg-3 suma hasta 12 pero el 4 * col-md-6 forma el grupo de divs suma hasta 24, no 12.

Sin embargo, esto no parece importar y funciona perfectamente en cada punto de interrupción.

¿Debería Preocuparme? ¿Importa de alguna manera? Seguramente, se supone que no debo hacer dos diseños completamente diferentes que duplican todos estos controles una vez para col-md-6 y col-lg-3 en la misma página.

Answer 1

He visto mucho uso del sitio web "col-xs-12 col-md-10 col-md-offset-1" últimamente. El desplazamiento centra el contenido, pero cada fila se llena con solo 11 cols. Si el siguiente elemento es una col-1, también debe incluir col-offset-1 (forzando un total de 13, moviendo la col-1 con offset-1 a la siguiente fila, alineándose muy bien). Si el siguiente elemento es más ancho, aún necesita el desplazamiento (Para omitir la primera columna).

En el lado de CSS, todo funciona con porcentajes. Si el ancho total de las columnas es superior al 100%, debe forzar al siguiente elemento en una nueva línea. U puede jugar fácilmente con este concepto haciendo un archivo html con muchos divs. Agregue el siguiente css a los divs (conceptos básicos de arranque)

body > div {
    margin: 0;
    padding: 0;
    float: left;
    width: 8.333333% (or 1/12th)
}

Luego puede cambiar el tamaño de los divs individuales para ver qué sucede. Puede ser más fácil jugar con valores redondos (por ej., 10% / 20%), solo se adhiere al bootstrap aquí. Espero que esto te ayude a comprender cómo maneja el navegador la grilla de bootstrap (que acabas de hacer una versión básica de)

Los documentos de Bootstrap sobre el envío de columnas también dan un buen ejemplo.

Answer 2

No, no hay nada que obligue a la cuadrícula de arranque a agregar hasta 12 columnas.
Es solo una preferencia / estilística.

Menos de 12 columnas -> Alinee a la izquierda:

Si tiene menos de doce columnas llenas, de forma predeterminada se alinearán a la izquierda, dejando espacio vacío a la derecha.

El siguiente código :

<div class=''row''>
    <div class="col-xs-2">Hi</div>
    <div class="col-xs-2">Hi</div>
</div>

.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

Resultados en esto: ( Demo en Fiddle )

Más de 12 columnas -> envolturas:

Si el total se agrega a más de 12 columnas, siempre que las columnas estén dentro de una clase de row , se ajustarán a filas adicionales. Un buen caso de uso sería un sistema de cuadrícula de fotos donde le gustaría agregar toneladas de fotos pero no sabe cuántas filas tendrá y aún quisiera definir el número de columnas.

El siguiente código :

<div class=''row''>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
</div>

Resultados en esto: ( Demo en Fiddle )

Aparte de eso, a veces ocurre que los diseños de 12 columnas se ven mejor, pero no es necesario que los uses; no es un sudoku :)

Answer 3

4 * col-md-6 creará 2 "filas" en una pantalla mediana. Como está envolviendo todo en .row , funcionará como se esperaba. Si lo eliminaste, las cosas se anidarán una al lado de la otra

p.ej

<div class="row">
  <div class="col-sm-2">Hello</div>
</div>
<div class="row">
  <div class="col-sm-2">Hello</div>
</div>

producirá 2 filas con 1 columna cada una, cada una de las cuales es 16.67% más ancha que la fila primaria y flotante hacia la izquierda porque una fila tiene un ancho del 100%. Los anchos de columna se especifican mediante col - ** - (número / 12) como un porcentaje (2/12 = 0.166667)

<div class="col-sm-2">Hello</div>
<div class="col-sm-2">Hello</div>

producirá 1 fila con 2 columnas que son 16.667% más anchas que el objeto principal. Entonces podrías renunciar a .row si lo .row

<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>

Esto creará: Pantalla pequeña (4 filas de ancho completo) Pantalla mediana (2 filas 2 columnas cada 50% de ancho) Pantalla grande (1 fila de 4 columnas cada 25% de ancho)