6.2 网格布局

什么是网格布局

网格布局是Bootstrap提供的一套页面布局系统,它的基本思路是:将整个网页分为N行×M列的网格(M最大为12),其他HTML元素都应该放在特定的单元格内。与此同时,这套网格布局还结合了媒体查询(Media Query)机制,因此可以支持响应式布局。

网格布局的容器

Bootstrap要求将网格布局放在一个特定的容器内,这个容器通常应该是class为.container或.container-fluid的div元素,.container和.container-fluid是Bootstrap提供的两个CSS类选择器的名称。

• .container:用于固定宽度并支持响应式布局的容器。
• .container-fluid:用于占领viewport宽度的100%的容器。

.container和.container-fluid的区别

.container:支持响应式布局,它根据浏览器viewport的宽度,按768px、992px、1200px将viewport分成4挡。

• 当浏览器viewport 的宽度小于768px 时,.container 容器使用最大宽度,效果与.container-fluid一样。
• 当浏览器viewport 的宽度大于等于768px时,.container 容器的宽度固定为750px。而.container-fluid容器的宽度则总是等于浏览器viewport的宽度。
• 当浏览器viewport 的宽度大于等于992px时,.container 容器的宽度固定为970px。而.container-fluid容器的宽度则总是等于浏览器viewport的宽度。
• 当浏览器viewport 的宽度大于等于1200px 时,.container 容器的宽度固定为1170px。而.container-fluid容器的宽度则总是等于浏览器viewport的宽度。

一般来说,使用.container-fluid时,容器宽度会比使用.container时的容器宽度略宽。而且由于padding等属性的原因,这两种容器不能互相嵌套。