Opciones de la cuadrícula

Vea cómo usar el sistema de cuadrícula para trabajar en múltiples dispositivos. flexygo el sistema se comporta genial no solo en los navegadores de escritorio más recientes, sino también en navegadores de tabletas y smartphones. Está repleto de grandes características, como la tabla con 12 columnas.

FUNCIONAMIENTO DEL SISTEMA	Dispositivos pequeños	Dispositivos medianos	Dispositivos grandes	Dispositivos extragrandes
Comportamiento de la cuadrícula	Colapsado para comenzar, horizontal por encima de los puntos de ruptura
Ancho máximo del contenedor	728px	992px	1200px	Larger than 1200px
Prefijo de clase	col-s	col-m	col-l	col-xl
Desplazamientos	Sí
Anidables	Sí

Ejemplos

General

Usando un único conjunto de .col-*.

.row .col-12

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-1

.col-2

.col-2

.col-2

.col-2

.col-2

.col-2

.col-3

.col-3

.col-3

.col-3

.col-4

.col-4

.col-4

.col-6

.col-6

Móviles, tabletas, escritorios

¿No quieres que tus columnas simplemente se apilen en dispositivos más pequeños? Utiliza las clases de cuadrícula para dispositivos extra pequeños y medianos agregando ..col-s-* .col-m-* a tus columnas. Consulta el ejemplo a continuación para tener una mejor idea de cómo funciona todo.

.col-s-12 .col-m-8 .col-8

.col-s-12 .col-m-4 .col-4

.col-s-12 .col-m-4 .col-4

.col-s-12 .col-m-4 .col-4

.col-s-12 .col-m-4 .col-4

.col-s-6 .col-6

.col-s-6 .col-6

Desplazando columnas

Mueve columnas a la derecha usando las clases .padL-. Estas clases aumentan el margen izquierdo de una columna por * columnas. Por ejemplo, .padL-m-4 mueve .col-4* cuatro columnas a la derecha.

.col-4

.col-4 .padL-4

.col-3 .padL-3

.col-3 .padL-3

.col-6 .padL-3

Desplazamiento responsive de columnas

Mueve columnas a la derecha usando las clases .padL-s-* .padL-m-* .padL-l-* .padL-xl-* Estas clases aumentan el margen izquierdo de una columna por * columnas, con un máximo de 12.

.col-3 .padL-3 .padL-s-0

.col-3 .padL-3 .padL-s-0

Anidando columnas

Para anidar tu contenido con la cuadrícula predeterminada, agrega una nueva .row y un conjunto de .col-* columnas dentro de una columna existente .col-* . Las filas anidadas deben incluir un conjunto de columnas que sumen 12.

Level 1: .col-12

Level 2: .col-6 .col-s-12

Level 2: .col-6 .col-s-12

Columnas ocultas

Oculta la columna dependiendo del tamaño de pantalla indicado. Si usamos la clase .hidden-s, cuando la pantalla es pequeña, esta columna estará oculta.

.col-12 .col-m-6 .hidden-s

.col-12 .col-m-6 .col-s-12