content
b. align-items-center is centered
a、justify-content-start 左端 & justify-content-center 居中 & justify-content-end 右端
b, column wrapping column wrapping
c, Column breaks column breakpoint
2. Column offset Offsetting columns
a. The .offset class performs offset processing on the column column
3. Independent column Standalone column
Visualizing Large Screen Design - General Catalog
Guide: Large screen case reference
1. Column alignment
1. Vertical alignment
a, align-items-start top
<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 is centered
<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, align-items-end bottom
<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. Horizontal alignment
a、justify-content-start 左端 & justify-content-center 居中 & justify-content-end 右端
<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, column wrapping column wrapping
If more than 12 columns are placed in a row, each additional set of columns will be wrapped as a unit on a new row.
In this example, all four columns are placed in a row, but col-4 plus col-9 is greater than 12 columns, so change col-9 to the next new row. Similarly, col-9 plus the third col- 4 is also greater than 12 columns, so col-4 also wraps to the next new row.
<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, Column breaks column breakpoint
Under normal circumstances, 3 col-4s are exactly one row. Here, because the column breakpoint w-100 is added, the function of truncating at the specified column position and opening a new row is realized.
<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. Column Reordering
1. Column sorting
a, .order-x class (x is 0,1,2,3,4,5)
Use the .order-x class to control the display order of content. The display order can be controlled by breakpoints .order-1 or .order-md-2. The .order-x class supports 6 grids (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、order-first 和 order-last
Both order-first and order-last classes are supported for sorting.
2. Column offset Offsetting columns
There are two ways to offset grid columns: .offset class and margin
a. The .offset class performs offset processing on the column column
It can be seen that offset-md-4 is used to shift the first column to the right by 4 columns.
<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. Independent column Standalone column
Columns can be used independently, not necessarily as direct children of row.
<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>