网格容器
- 流体容器(container-fluid)
特点:width=100%即占据整行
CSS样式:
.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
*, *::before, *::after {
box-sizing: border-box;
}
- 固体容器(container)
特点:最大宽度根据页面宽度大小作出对应改动
PS:CSS样式同流体容器一致,除@media
特小 <576px |
Small >=576px |
Medium >=768px |
Large >=992px |
特大 >=1200px |
|
---|---|---|---|---|---|
max-width | 无(自动) | 540 | 720 | 960 | 1140 |
类前缀 | col- | col-sm- | col-md- | col-lg- | col-xl- |
列宽 | - | 45 | 60 | 80 | 95 |
行(row)
CSS主要属性
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
// margin的值为-15px的目的
// 使row的width==ontainer和container-fluid的width
box-sizing: border-box;
行内列数
row-cols-X || row-cols-breakpoint-X
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div