contenido
a, alinear-elementos-iniciar arriba
b. align-items-center está centrado
c, alinear-elementos-extremo inferior
a、justificar-contenido-iniciar 左端 & justificar-contenido-centro 居中 & justificar-contenido-final 右端
b, envoltura de columna envoltura de columna
c, la columna rompe el punto de interrupción de la columna
2. Desplazamiento de columnas Desplazamiento de columnas
a. La clase .offset realiza el procesamiento de compensación en la columna columna
3. Columna independiente Columna independiente
Visualización de diseño de pantalla grande - Catálogo general
Guía: referencia de caso de pantalla grande
1. Alineación de columnas
1. Alineación vertical
a, alinear-elementos-iniciar arriba
<div class="container" style="border: 5px red solid">
<div class="row align-items-start" style="margin:5px; padding:5px; height:50%; border: 5px blue solid">
<div class="col" style="border: 5px green solid">
1
</div>
<div class="col" style="border: 5px green solid">
2
</div>
<div class="col" style="border: 5px green solid">
3
</div>
<div class="col" style="border: 5px green solid">
4
</div>
</div>
</div>b. align-items-center está centrado
<div class="container" style="border: 5px red solid">
<div class="row align-items-center" style="margin:5px; padding:5px; height:50%; border: 5px blue solid">
<div class="col" style="border: 5px green solid">
column 1
</div>
<div class="col" style="border: 5px green solid">
column 2
</div>
<div class="col" style="border: 5px green solid">
column 3
</div>
<div class="col" style="border: 5px green solid">
column 4
</div>
</div>
</div>c, alinear-elementos-extremo inferior
<div class="container" style="border: 5px red solid">
<div class="row align-items-end" style="margin:5px; padding:5px; height:50%; border: 5px blue solid">
<div class="col" style="border: 5px green solid">
column 1
</div>
<div class="col" style="border: 5px green solid">
column 2
</div>
<div class="col" style="border: 5px green solid">
column 3
</div>
<div class="col" style="border: 5px green solid">
column 4
</div>
</div>
</div>2. Alineación horizontal
a、justificar-contenido-iniciar 左端 & justificar-contenido-centro 居中 & justificar-contenido-final 右端
<div class="container" style="border: 5px red solid">
<div class="row justify-content-start" style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4" style="border: 5px green solid">
column 1 start
</div>
<div class="col-4" style="border: 5px green solid">
column 2 start
</div>
</div>
<div class="row justify-content-center" style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4" style="border: 5px green solid">
column 3 center
</div>
<div class="col-4" style="border: 5px green solid">
column 4 center
</div>
</div>
<div class="row justify-content-end" style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4" style="border: 5px green solid">
column 5 end
</div>
<div class="col-4" style="border: 5px green solid">
column 6 end
</div>
</div>
</div>b, envoltura de columna envoltura de columna
Si se colocan más de 12 columnas en una fila, cada conjunto adicional de columnas se envolverá como una unidad en una nueva fila.
En este ejemplo, las cuatro columnas se colocan en una fila, pero col-4 más col-9 es mayor que 12 columnas, así que cambie col-9 a la siguiente fila nueva. De manera similar, col-9 más la tercera columna 4 es también más de 12 columnas, por lo que col-4 también se ajusta a la siguiente fila nueva.
<div class="container" style="border: 5px red solid">
<div class="row " style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4" style="border: 5px green solid">
col-4
</div>
<div class="col-9" style="border: 5px green solid">
col-9
</div>
<div class="col-4" style="border: 5px green solid">
col-4
</div>
<div class="col-4" style="border: 5px green solid">
col-4
</div>
</div>
</div>c, la columna rompe el punto de interrupción de la columna
En circunstancias normales, 3 columnas 4 son exactamente una fila Aquí, debido a que se agrega el punto de interrupción de columna w-100, se realiza la función de truncar en la posición de columna especificada y abrir una nueva fila.
<div class="container" style="border: 5px red solid">
<div class="row " style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4" style="border: 5px green solid">
col-4
</div>
<div class="col-4" style="border: 5px green solid">
col-4
</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-4" style="border: 5px green solid">
col-4
</div>
<div class="col-4" style="border: 5px green solid">
col-4
</div>
</div>
</div>2. Reordenación de columnas
1. Clasificación de columnas
a, clase .order-x (x es 0,1,2,3,4,5)
Utilice la clase .order-x para controlar el orden de visualización del contenido. El orden de visualización se puede controlar mediante los puntos de interrupción .order-1 o .order-md-2. La clase .order-x admite 6 cuadrículas (0,1,2,3,4,5) .
<div class="container" style="border: 5px red solid">
<div class="row " style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4 order-3" style="border: 5px green solid">
col-1
</div>
<div class="col-4 order-2" style="border: 5px green solid">
col-2
</div>
<div class="col-4 order-1" style="border: 5px green solid">
col-3
</div>
<div class="col-4 order-0" style="border: 5px green solid">
col-4
</div>
</div>
</div>b, orden-primero 和 orden-último
Tanto las clases order-first como order-last son compatibles con la clasificación.
2. Desplazamiento de columnas Desplazamiento de columnas
Hay dos formas de compensar las columnas de la cuadrícula: .offset class y margin
a. La clase .offset realiza el procesamiento de compensación en la columna columna
Se puede ver que offset-md-4 se usa para desplazar la primera columna a la derecha en 4 columnas.
<div class="container" style="border: 5px red solid">
<div class="row " style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4 offset-md-4" style="border: 5px green solid">
col-1
</div>
<div class="col-4" style="border: 5px green solid">
col-2
</div>
<div class="col-4" style="border: 5px green solid">
col-3
</div>
<div class="col-4" style="border: 5px green solid">
col-4
</div>
</div>
</div>b 、 ms-auto me-auto
<div class="container" style="border: 5px red solid">
<div class="row " style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4 ms-auto" style="border: 5px green solid">
col-1
</div>
<div class="col-4 ms-auto" style="border: 5px green solid">
col-2
</div>
</div>
<div class="row " style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4 ms-auto" style="border: 5px green solid">
col-3
</div>
<div class="col-4 me-auto" style="border: 5px green solid">
col-4
</div>
</div>
</div>3. Columna independiente Columna independiente
Las columnas se pueden usar de forma independiente, no necesariamente como elementos secundarios directos de la fila.
<div class="container" style="border: 5px red solid; height: 50%;">
<div class="col-3" style="border: 5px green solid">
col-1
</div>
<div class="col-9 " style="border: 5px green solid">
col-2
</div>
</div>