自定义网格系统
在上一课中我们了解了网格系统的基础知识。在本文中，我们将深入挖掘并了解网格系统。
首先，在上一课中，我们介绍了如何根据屏幕大小指定断点和更改布局。有了这个，直到将“在大型 PC 上查看时的屏幕”和“在小型智能手机上查看时的屏幕”分开的响应式支持都可以。
但是，根据布局，您可能想要指定两个断点、删除列之间的填充或对其进行自定义（稍后会详细介绍）。为了灵活应对各种布局，您需要了解我们将要介绍的 CSS 类。
指定多个断点
您可以指定多个断点和列数，如“div class=”col-md-6 col-lg-3″”。这允许您分三步切换列数。
<div class="row">
< div class= "col-md-6 col-lg-3" >
</div>
让我们在列中的内容是图像的示例中仔细看看何时使用此方法。
下图显示了仅指定一个断点/列号时每个屏幕宽度的显示。
# 只有一个断点的代码
<div class="row">
< div class="col-md-6">
</div>
是不是因为屏幕太小，很难看到中间的小PC？
多个断点
这个问题可以通过添加多个断点来解决。下面是一个实现两个断点的例子。在大型 PC 上查看时，通过将列设置为 3，可以排列 4 张图像（4 张可以放在 12 列中，对吧？）。
在中端 PC 或平板电脑上查看时，6 列允许您并排显示 2 张图像（2 张适合 12 列，对吧？）。
其他的，比如小型智能手机，可以有 12 列，这样只能显示一张图像（12 列只能放一张，对吧？）。
如果您像上面那样指定两个断点，图像将在任何屏幕尺寸上都更容易看到。
无论屏幕尺寸如何，我都想保持漂亮的设计！可以看到在这种情况下设置多个断点是非常有效的。
删除列之间的填充
这些列预先指定了 padding15px 左右边距。有时您可能想要消除此余量。在这种情况下，您可以使用 CSS 类“px-0”来消除边距。这意味着左右 (x) 填充 (p) 设置为 0。
<div class="row">
< div class = "col-md-6 col-lg-3 px-0" >
</div>
