---
title: Grid System
localeTitle: 网格系统
---
## 网格系统
简而言之,Bootstrap网格系统可帮助您创建响应式布局,它包含一个行和列系统,可帮助您构建内容。
行是水平的列组,每行最多12列。在每行中,内容放置在列内,并且可以跨越1到12列之间的任何位置。
Bootstrap有五种不同类型的网格层,即Extra small,Small,Medium,Large和Extra large,为每个网格层定义了一个断点。
Bootstrap使用像素来定义网格层断点,作为网格层断点的不同视口宽度为:
#### 怎么运行的
###### 容器
容器是_包含_网格的最外层元素,在屏幕中间使用`container`作为固定宽度的容器(大屏幕上的额外边距)或`container-fluid`的全宽度。
```
```
###### 行
使用`row`对`row`进行分组,这将使所有内容保持正确排列并帮助您构建网格。
```
```
###### 列
列类指示您希望在每行可能使用的12列中使用的列数。例如`col-sm-6`将意味着你的专栏将使用了宽度的一半`row`在小屏幕上,和`col-lg-4`将使用了大屏幕上的三分之一。
以下是如何定义类前缀以在各种屏幕尺寸上使用一个列宽:
* **超小** `col-1`
* **小** `col-sm-1`
* **中等** `col-md-1`
* **大** `col-lg-1`
* **超大** `col-xl-1`
```
```
#### 例
一个全宽网格,有四列,每个列在xs屏幕上占据整行,在sm和md屏幕上占据半行,在大屏幕和上面的屏幕上占据行宽度的四分之一。
```
First Column
Second Column
Third Column
Forth Column
```
_请注意,未定义`col-md`和`col-xl` ,其中未定义大小,它将默认为下一个已指定的较小大小。_
Bootstrap提供了一个现成的12列网格系统,用于布局。请考虑以下代码。
```html
Content
Content
```
哪里:
```
- col = column
- md = screen size
- 6 = column width
```
作为12列网格系统,所有用户定义的网格列宽度必须最多为12。
屏幕尺寸值可以分配如下:
* xs - <768px手机
* sm - <992px平板电脑
* md - <1200px笔记本电脑
* lg - > 1200px台式机
Bootstrap首先是移动的并且响应迅速。
移动优先意味着网格布局将自动响应较小的屏幕。然后,HTML定义更大屏幕的网格布局。
以下代码和图像显示了使用不同列宽的可能性。
```html
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
```
![12-COL-格](https://github.com/bflatt72/bflatt72.github.io/blob/master/img/bootstrapgrid1.png)
#### 更多信息:
[Bootstrap Docs - 网格系统](https://getbootstrap.com/docs/4.0/layout/grid/)
_本指南基于Bootstrap v4(它将与v3一起使用,除了额外的小屏幕定义为`xs`且没有`xl`大小)_
* 超大: **视口宽度> = 1200px**
* 大: **视口宽度> = 992px**
* 中: **视口宽度> = 768px**
* 小: **视口宽度> = 576px**
* 超小: **视口宽度低于576px**
#### 更多信息:
https://getbootstrap.com/docs/4.0/layout/grid/