2.3 使用方法
2.3.1 基本用法
栅格系统的基本使用方法如【实例2-1】所示。容器 container 包含行 row，行 row 包含列col-X-*。每行包含12栅格，如果定义的列超过12格，则自动换行。
为了获得更好的演示效果，我们在【实例2-1】的head部分添加如下代码。（注意，此代码需要写在“<link rel=＂stylesheet＂ href=＂css/bootstrap.min.css＂ />”之后。这里定义行row的底部外边距为15px，所有的列col-X-*设置了上/下内边距、背景颜色和边框。）
<style>
.row{
margin-bottom:15px;
}
[class*=＂col＂]{
padding-top:15px;
padding-bottom:15px;
background-color:rgba(86,61,124,0.15);
border:1px solid rgba(86,61,124,.2);
}
</style>
以上代码在Chrome浏览器中的运行效果如图2-2所示。
图2-2 添加了行和列的样式
1.容器类
Bootstrap需要将页面内容和栅格系统包裹在一个布局容器中。为了使栅格具有响应性，屏幕宽度有5个响应断点：extra-small、small、medium、large 和 extra-large。具体如表2-1所示。
表2-1 屏幕宽度的响应断点及其屏幕宽度范围
Bootstrap提供了3种不同的容器，具体如下。
● .container容器：在每个响应断点处设置一个 max-width（最大宽度）。
● .container-fluid容器：在每个响应断点处设置容器宽度为100%。
● .container-{breakpoint}容器：在每个响应断点处设置容器宽度为100%，以达到指定的断点为止。其中，breakpoint的取值范围为sm（平板设备）、md（桌面显示器）、lg（大桌面显示器）和xl（超大桌面显示器）。例如，container-sm表示小于576px时，容器宽度为100%；当屏幕宽度大于等于576px时，container-sm就到达了断点，容器宽度与.container显示一致。
容器类在不同设备上的响应断点情况如表2-2所示。
表2-2 容器类的响应断点及其屏幕宽度范围
在【实例2-1】改变浏览器的宽度中，可以看到不同的效果。随着宽度的改变，页面内容的宽度随之变化。
2.列类
在以上实例中，我们使用了col-lg-1、col-lg-4等列类。Bootstrap 4中定义的列类有以下几种。
● .col：等列宽，对所有设备都是一样的，进行等分。
● col-*:*代表数字，表示占了*格。例如，col-3表示对所有设备都是一样的，这一列占3格。
● col-X-*:X表示的是设备宽度，其取值为sm（平板设备）、md（桌面显示器）、lg（大桌面显示器）、xl（超大桌面显示器）。*表示占了*格。例如，col-md-4表示当设备宽度大于等于768px时，该列占了12列中4列的宽度。具体如表2-3所示。
表2-3 栅格系统表
读者可以自行修改【实例2-1】的代码，然后改变浏览器的宽度，会发现当宽度小于992px时，有些地方会一列占一行；当宽度大于1200px时，和大桌面效果是一致的。所以，这些布局都是向后兼容的。
这是因为在定义媒体查询时，定义为min-width，即最小宽度。示例如下。
@media (min-width:768px){
}
3.栅格系统中的样式
以下是栅格系统中的各个样式。
● .container：左右各有15px的内边距。
● .row：是column的容器，最多只能放12个column。行左右各有-15px的外边距，可以抵消.container的15px的内边距。
● column：左右各有15px的内容边距，可以保证内容不紧靠浏览器的边缘。两个相邻的column的内容之间有30px的间距。
这样定义后，column里面可以很方便地嵌套row。如果要在 column中嵌套 row，则此时的column具有和container相同的特性（左右各有15px的内边距），所以此时的column就相当于container。