Planifica anchos de columna en la cuadrícula de 12 columnas.
Cada fila que añades está en la cuadrícula Bootstrap: doce pistas iguales que sus columnas comparten. Un diseño como 1/3 + 2/3 da a una columna cuatro pistas y a la otra ocho. Usa esta página para planificar anchos que suman, y para dar a una fila un segundo diseño para pantallas más pequeñas. Para añadir una fila, consulta Añadir una fila.
El vídeo da a una fila de 4 columnas un segundo diseño para tabletas, y luego estrecha la ventana.
Cómo las fracciones pasan a pistas
| Fracción | Pistas | Uso típico |
|---|---|---|
| 1/1 | 12 | Una columna de ancho completo |
| 1/2 | 6 | Dos columnas iguales |
| 1/3 | 4 | Tres columnas iguales, o una barra lateral junto a 2/3 |
| 2/3 | 8 | Contenido principal junto a una barra lateral de 1/3 |
| 1/4 | 3 | Cuatro columnas iguales, o una barra lateral junto a 3/4 |
| 3/4 | 9 | Contenido principal junto a una barra lateral de 1/4 |
| 1/6 | 2 | Seis columnas pequeñas, como una fila de logos |
| 5/12 y 7/12 | 5 y 7 | Dos columnas de ancho casi igual |
Las pistas de una fila suman 12. Cuando suman más, las columnas extra saltan a una línea nueva. Usa fracciones que salen en pistas enteras: mitades, tercios, cuartos, sextos y doceavos. Una fracción como 1/5 no tiene clase Bootstrap correspondiente.
Una fila dentro de una columna divide esa columna en sus propias doce pistas. Consulta Anidamiento.
Dale a una fila otro diseño en tabletas
El diseño que escoges para una fila nueva se aplica desde Medium devices (≥ 768px) hacia arriba. Bajo ese ancho, las columnas se apilan. Estos pasos mantienen cuatro columnas en escritorios y muestran dos por línea en tabletas.
- Pasa sobre la fila y haz clic en el icono de cuadrícula en su barra de controles. El diálogo de diseño se abre en el panel Medium devices (≥ 768px).
- Escoge la baldosa con cuatro columnas iguales.
- Haz clic en Add screen size. Un segundo panel se abre con una copia del diseño.
- En la lista de tamaños de pantalla del panel nuevo, elige Small devices (≥ 576px).
- Haz clic en Custom Layout, escribe
1/2 + 1/2 + 1/2 + 1/2y haz clic en Save. - Haz clic en Save en la barra.
Cuatro mitades conservan las cuatro columnas y ponen dos en cada línea. Una baldosa con dos columnas reduciría la fila a dos columnas.
Lo que ves
En una pantalla ancha la fila muestra cuatro columnas lado a lado. Estrecha la ventana del navegador por debajo de 768 píxeles y se agrupan de dos por línea. Bajo 576 píxeles, cada columna ocupa todo el ancho.
Tamaños de pantalla
Cada panel en el diálogo de diseño fija las columnas para un tamaño de pantalla. El diseño también vale para pantallas mayores, hasta el siguiente tamaño con panel propio.
| Panel | Se aplica desde |
|---|---|
| Extra small (< 576px) | Los teléfonos más pequeños hacia arriba |
| Small devices (≥ 576px) | 576 píxeles |
| Medium devices (≥ 768px) | 768 píxeles; el primer panel de una fila nueva |
| Large devices (≥ 992px) | 992 píxeles |
| Extra large (≥ 1200px) | 1200 píxeles |
| Extra extra large (≥ 1400px) | 1400 píxeles |
Remove screen size elimina un panel y su diseño. Custom Layout acepta cualquier lista de fracciones, como 1/4 + 1/2 + 1/4. Cuando el diseño de un panel no es una de las baldosas, el diálogo marca Custom Layout y nombra el diseño en él, como Custom Layout (1/2 + 1/2 + 1/2 + 1/2). Haz clic para editar ese diseño en el recuadro de diseño personalizado.
Bootstrap en tu sitio
La cuadrícula necesita Bootstrap 5 en la página. Una administración del sitio elige de dónde viene en DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings), en Bootstrap. Sideload Bootstrap files ofrece Bootstrap 5, que el constructor carga por su cuenta, o None (theme provides Bootstrap).
Si no ves el diseño
- Las columnas se apilan en todos los tamaños de pantalla. No hay Bootstrap cargado: el ajuste es None (theme provides Bootstrap) y el tema no lo carga. Elige Bootstrap 5 en Sideload Bootstrap files desde
/admin/dxpr_studio/dxpr_builder/settings. - El diseño de escritorio perdió columnas. Escogiste una baldosa con menos columnas para otro tamaño de pantalla, y el constructor redujo los diseños de ancho igual para igualar. Deshaz el cambio, como muestra Deshacer y rehacer, y usa Custom Layout con una fracción por columna.
- La última columna cae a una línea nueva. Las fracciones suman más de una fila de 12 pistas. Haz que sumen 1, como
1/4 + 3/4. - Una columna personalizada no tiene un ancho claro. Su fracción, como 1/5, no tiene clase Bootstrap. Usa mitades, tercios, cuartos, sextos o doceavos.
¿Qué sigue?
- Añadir una fila: añade filas y escoge un preset de columnas.
- Diseño adaptable: muestra u oculta elementos en teléfonos, tabletas o escritorios.
- Anidamiento: pon filas dentro de columnas para diseños más finos.