响应式的选择器

下面的列子，展示了一行两列与一行三列的布局，从xs（如上表如见，实际上并不存在xs这个空间命名，是以.col表示，下同不再注）到xl（即.col-xl-*）所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成。

等宽列可以分成多行，但是有一个Safari旧版浏览器的flexbox错误，阻止它在没有显示flex-basis或border（影响到边框效果）。
Bootstrap非官方的一个实例，已经介绍了两种解决方法，但如果是最新safri浏览器下，则不需要这样做。

下面是等宽列两行的处理方法，引用w-100进行切割分行：

在Flexbox的布局上，拥有很多现代特征，比如自动布局和列宽处理。你可以在一行多列的情况下，特别指定一列并进行宽度定义，同时其它列自动调整大小，可以使用预定义的栅格类（如下所示），从而实行栅格宽或行宽的优化处理。注意在这种民琣上，无论中心定义列的宽度如何，其他列都将调整大小。

创建跨多个行的等宽列，方法是插入.w-100要将列拆分为新行。通过混合.w-100一些还可以影响一些显示状态效果,如按钮排序等。

译者注：这部份其实和上面safri浏览器bug讲解重复了，但官网如此保持尊重。

又注：.w100似乎与.clearfix有时可以达到同样的网页效果。

可以通过特定于断点的填充和负边距实用程序类来响应地调整装订线。 要更改给定行中的装订线，请在.row 上配置负边距实用程序，并在.col上配对匹配填充实用程序。 可能需要调整.container或.container-fluid 父级以避免不必要的溢出，再次使用匹配的填充实用程序.

这是一个在大(lg) 断点及以上定制Bootstrap网格的示例。 我们使用.px-lg-5增加了.col填充, 在父.row上使用.mx-lg-n5进行了抵消，然后使用.px-lg-5 调整了.container包装.