content
Third, the automatic layout column
1. Columns are automatically equal width col
2. Set the width of a certain column, and the other columns will automatically have the same width
3. Variable width content col-{ breakpoint }-auto
1. All breakpoints breakpoint col-x(1-12)
Visualizing Large Screen Design - General Catalog
Guide: Large screen case reference
A grid uses a series of containers , rows and columns to lay out and align content.
The simplest example
This example uses the class grid to create 3 equal-width columns , evenly distributed in the parent container .
<div class="container" style="border: 5px red solid; ">
<div class="row" style="border: 5px blue solid; ">
<div class="col" style="border: 5px green solid;">
Column1
</div>
<div class="col" style="border: 5px green solid;">
Column2
</div>
<div class="col" style="border: 5px green solid;">
Column3
</div>
</div>
</div>2. Grid grid features
- The grid grid supports six responsive breakpoints . None (X-Small), sm (Small), md (Medium), lg (Large), xl (Extra large), xxl (Extra extra large) .
- container The content of the padding that is centered horizontally .
- The row row is a wrapper for the column column . Each column has horizontal fill gutter slots that control the space between them.
- Column columns can be combined flexibly. Each row has a total of 12 columns, and these columns can be combined in any number.
- Gutters slots can be used across all breakpoints .
Third, the automatic layout column
1. Columns are automatically equal width col
<div class="container" style="border: 5px red solid; ">
<div class="row" style="border: 5px blue solid; ">
<div class="col" style="border: 5px green solid;">
Column1
</div>
<div class="col" style="border: 5px green solid;">
Column2
</div>
</div>
</div> 
<div class="container" style="border: 5px red solid; ">
<div class="row" style="border: 5px blue solid; ">
<div class="col" style="border: 5px green solid;">
Column1
</div>
<div class="col" style="border: 5px green solid;">
Column2
</div>
<div class="col" style="border: 5px green solid;">
Column3
</div>
<div class="col" style="border: 5px green solid;">
Column4
</div>
</div>
</div>2. Set the width of a certain column, and the other columns will automatically have the same width
Set column 2 to col-6, and the rest 1, 3, 4 are allocated equally.
<div class="container" style="border: 5px red solid; ">
<div class="row" style="border: 5px blue solid; ">
<div class="col" style="border: 5px green solid;">
Column1
</div>
<div class="col-6" style="border: 5px green solid;">
Column2（6）
</div>
<div class="col" style="border: 5px green solid;">
Column3
</div>
<div class="col" style="border: 5px green solid;">
Column4
</div>
</div>
</div>3. Variable width content col-{ breakpoint }-auto
Use the col-{ breakpoint }-auto class to set the column width according to the content width.
It can be seen that the column width of the col-md-auto class is adaptive according to the content width of the content Variable width, and the column width of the col class is adaptive according to the remaining width of the container container.
<div class="container" style="border: 5px red solid">
<div class="row justify-content-md-center" style="border: 5px blue solid">
<div class="col col-lg-2" style="border: 5px green solid">
1 of 3
</div>
<div class="col-md-auto" style="border: 5px green solid">
Variable width
</div>
<div class="col col-lg-2" style="border: 5px green solid">
3 of 3
</div>
</div>
<div class="row" style="border: 5px blue solid">
<div class="col" style="border: 5px green solid">
1 of 3
</div>
<div class="col-md-auto" style="border: 5px green solid">
Variable width
</div>
<div class="col col-lg-2" style="border: 5px green solid">
3 of 3
</div>
</div>
</div>4. Responsive classes
Bootstrap's grid includes 6 predefined classes for building complex responsive layouts. Customize the size of the columns on an extra small, small, medium, large, extra large, or extra extra large device as you see fit.
1. All breakpoints breakpoint col-x(1-12)
<div class="container" style="border: 5px red solid">
<div class="row justify-content-md-center" style="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>
<div class="row" style="border: 5px blue solid">
<div class="col-8" style="border: 5px green solid">
1
</div>
<div class="col-4" style="border: 5px green solid">
2
</div>
</div>
</div>2. Stacked to horizontal
<div class="container" style="border: 5px red solid">
<div class="row" style="border: 5px blue solid">
<div class="col-sm" style="border: 5px green solid">
1
</div>
<div class="col-sm" style="border: 5px green solid">
2
</div>
<div class="col-sm" style="border: 5px green solid">
3
</div>
</div>
<div class="row" style="border: 5px blue solid">
<div class="col-sm-8" style="border: 5px green solid">
1
</div>
<div class="col-sm-4" style="border: 5px green solid">
2
</div>
</div>
</div>3. Row columns
Use row-cols-2 to specify the number of columns each row contains.
<div class="container" style="border: 5px red solid">
<div class="row row-cols-2" style="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>Five, nested layout Nesting
To use the default grid grid nested content, add a new row to the column column, and then continue to add columns in this new row.
<div class="container" style="border: 5px red solid">
<div class="row row-cols-2" style="border: 5px blue solid">
<div class="col" style="border: 5px green solid">
1 层
</div>
<div class="col" style="border: 5px green solid">
<div class="row">
<div class="col-8" style="border: 5px purple solid">
2 层
</div>
<div class="col-4" style="border: 5px purple solid">
2 层
</div>
</div>
</div>
<div class="col" style="border: 5px green solid">
3
</div>
<div class="col" style="border: 5px green solid">
4
</div>
</div>
</div>