bootstrap专栏 02.栅格与弹性布局 02.栅格等级

# 02.栅格等级

[toc]{type: "ol", level: [3,4]}

### css结构
```css
.row {
    border: dashed 4px goldenrod;
    margin: 10px 0;
}

.ca {
    border: solid 2px brown;
}
```


### 等级分类
#### col
- **超小屏幕**{style="color:green"}   <576px
#### col-sm
- **小屏幕**{style="color:green"}   >=576px
#### col-md
- **中等屏幕**{style="color:goldenrod"}   >=768px
#### col-lg
- **大屏幕**{style="color:brown"}   >=992px
#### col-xl
- **超大屏幕**{style="color:brown"}   >=1200px


### 案例解析
- 可添加多种响应方式：
- col
> 当屏幕宽度<576,会采用3列均分的状态
- col-lg
> 当屏幕宽度>992时,会采用2、2、8的划分方式
- 不设置
> 不设置的部分，与其左侧的保持一致：
> 即：当屏幕在576-992之间时，按col的模式显示
```html
<div class="container">
    <div class="row">
        <div class="col col-lg-2 ca">username</div>
        <div class="col col-lg-2 ca">password</div>
        <div class="col col-lg-8 ca">hobby</div>
    </div>
</div>
```