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

# 01.栅格布局

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

### css结构
```css
.row {
    border: solid 2px brown;
    margin: 10px 0;
}
/*覆盖自带的列属性*/
.col-sm, .col-sm-2, .col-sm-8 {
    border: solid 1px brown;
    background: goldenrod;
}
```


### 固体布局
> 容器布局可以嵌套，但是不推荐
> 两侧留白
```html
<div class="container"></div>
```

#### 创建行
```html
<div class="row"></div>
```

#### 创建列
> 默认为等宽
```html
<div class="col-sm">username</div>
<div class="col-sm">password</div>
<!--将其切割为2行 宽度满 高度为0-->
<div class="w-100"></div>
<div class="col-sm">pear</div>
<div class="col-sm">pear1234</div>
```
![栅格布局-固体布局](01.栅格布局-固体布局.png)


### 流式布局
> 两侧不留白
```html
<div class="container-fluid"></div>
```
#### 创建行
```html
<div class="row"></div>
```

#### 创建列
> 可指定列宽 总和大于12则换行
```html
<div class="col-sm-8">username</div>
<div class="col-sm-2">password</div>
<div class="col-sm-2">hobby</div>
```
![栅格布局-流式布局](01.栅格布局-流式布局.png)