Elemento contenedor
Nota: La información de este artículo se aplica solo a las páginas.
Una página siempre requiere un elemento de contenedor para envolver cualquier elemento o Widget (uno o muchos) pero no puedes envolver un contenedor dentro de otro contenedor.
En un elemento contenedor, puedes definir hasta 4 columnas y también establecer diferentes anchos para cada una de estas columnas. Esto te brinda la posibilidad de lograr una amplia variedad de diseños. Estas columnas se comportan de forma diferente según el tamaño de la pantalla (como las pantallas de los móviles).
Así es como se adapta nuestro sistema de grillas, según el tamaño de la pantalla:
| Pantallas grandes (≥1200px) |
Pantallas medianas (≥992px) |
Pantallas pequeñas (≥768px) |
Pantallas extra pequeñas (<768px) |
|
|---|---|---|---|---|
| Comportamiento de la columna | Horizontal | Vertical (apilado) |
||
| Ancho del contenedor | 1170 px | 970 px | 750px | Automático (100%) |
| Ancho de canal | 30px (15px a cada lado de una columna) | |||
Aquí puedes ver un ejemplo del sistema de grilla en acción y cómo se apilan las columnas en pantallas más pequeñas :
Por favor mira el siguiente video para aprender cómo agregar un contenedor, configurar el número de columnas y personalizar el ancho de cada columna en una página: