La tarea es cambiar una columna del diseño de cuadrícula de Bootstrap 4 a una fila en tamaños de pantalla pequeños.
Sintaxis:
<element class="col-md-4 col-sm-6 ...">...</element>
Enfoque: para resolver la tarea dada, debemos usar el diseño de cuadrícula de Bootstrap 4. El diseño de cuadrícula divide toda la fila visible en 12 columnas de igual tamaño. Una vez que estamos en una fila, podemos especificar fácilmente la disposición de filas y columnas en función del tamaño de la pantalla. Esto se hace agregando la clase “col-SIZE-SIZE_TO_OCCUPPY” .
Por ejemplo, .col-md-4 que significa tomar 4 columnas en las pantallas medianas. Si apilamos varias clases de columnas en un solo elemento, podemos definir cómo queremos que se vea el diseño en otras pantallas y cambiar las columnas a filas como queramos. Por ejemplo, .col-md-4 .col-sm-6significa que el elemento dado ocupará 4 columnas seguidas para pantallas medianas (permitiendo esencialmente más elementos en una sola fila) mientras que en pantallas más pequeñas ocupará 6 columnas. Si la suma de columnas para cualquier fila excede 12, se cambiará automáticamente a la siguiente fila.
Clases y pantallas disponibles:
| Nombre | Clase | Tamaño de pantalla |
|---|---|---|
| Extra Pequeño | col-TALLA | < 576px |
| Pequeña | col-sm-TALLA | ≥ 576px |
| Medio | col-md-SIZE | ≥ 768px |
| Largo | col-lg-SIZE | ≥ 992px |
| Extra grande | col-xl-TALLA | ≥ 1200px |
NOTA: El TAMAÑO en la tabla anterior se debe reemplazar por el tamaño de columna deseado de 0 a 12 inclusive.
Ejemplo 1: en este ejemplo, crearemos una fila simple de tres columnas y cambiaremos una columna a una nueva fila en pantallas más pequeñas.
html
<html> <head> <link href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <center> <h1 style="color: green;">GeeksForGeeks</h1> <div class="row"> <div class="col-md-4 col-sm-6" style="background-color: chartreuse;"> <br> </div> <div class="col-md-4 col-sm-6" style="background-color: black;"> <br> </div> <!-- Sum of SM col exceeds 12 so if the screen is small (less than 576px) the last column will Automatically get aligned in the next row --> <div class="col-md-4 col-sm-6" style="background-color: rebeccapurple;"> <br> </div> </div> </center> </body> </html>
Salida: a medida que el tamaño de la pantalla se vuelve más pequeño que 576 px (SM), la columna se alinea automáticamente con la siguiente fila.
Ejemplo 2: En este ejemplo, crearemos un diseño anidado de cuadrículas donde mostraremos los datos en columnas en pantallas medianas y cambiaremos a una sola fila a medida que el tamaño de la pantalla sea más pequeño.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <center> <h1 style="color: green;">GeeksForGeeks</h1> <div class="row container"> <div class="col-md-4 col-sm-12"> <!-- Nested! switch to row as screen gets smaller --> <div class="row"> <div class="col-md-12 col-sm-6" style="background-color: yellow;"> <h3>GeeksForGeeks is awesome!</h3> </div> <div class="col-md-12 col-sm-6" style="background-color: yellowgreen;"> <h3>GeeksForGeeks is actually for geeks!</h3> </div> </div> </div> <div class="col-md-8 col-sm-12" style="background-color: tomato;"> <h3>I will switch to row as the screen goes smaller!</h3> </div> </div> </center> </body> </html>
Salida: la fila de nivel superior se reduce a una columna a medida que disminuye el tamaño de la pantalla, pero el diseño de cuadrícula anidada tiene el efecto contrario al definido. (van de columna a fila)
Navegador compatible:
- Google Chrome
- Internet Explorer (después de 9.0)
- Firefox
- Ópera
- Safari