Bootstrap栅格布局
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，它允许页面在不同屏幕尺寸上自动分为最多12列。系统包括易于使用的预定义类，以及强大的mixin用于生成更具语义的布局。
栅格系统通过一系列行与列的组合创建页面布局，内容可放入这些布局中。研究实例可将这些原理应用于代码。
Bootstrap栅格系统在不同屏幕设备上的工作原理可通过下表详细了解。Bootstrap4版本中的栅格参数与之前版本有所不同。
使用单一一组.col-md-* 栅格类即可创建基本栅格系统，在手机和平板设备上堆叠显示（适用于超小屏幕到小屏幕），在桌面设备上变为水平排列。所有列必须位于.row内。
将最外层布局元素.container更改为.container-fluid，可将固定宽度栅格布局转换为100%宽度布局。
针对不同屏幕设备，可以使用.col-xs-* 和.col-md-* 类来调整布局。通过添加.col-sm-* 类，可以创建更加动态和强大的布局。
当.row内包含的列超过12个时，多余的列将另起一行排列。
为解决某些阈值时某些列出现高度问题，建议使用.clearfix与响应式工具类。这些类可帮助解决列在分界点的响应式问题。
使用.col-md-offset-* 类可以将列向右侧偏移。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移4个列的宽度。也可以使用.col-*-offset-0类来覆盖较低网格级别的偏移。
为了使用内置的栅格系统将内容嵌套，可在已有.col-sm-*元素内部添加新的.row元素和一系列.col-sm-*元素。嵌套行所包含的列个数不能超过12个。
为了针对不同屏幕尺寸展示或隐藏页面内容，可以利用媒体查询功能并结合以下工具类：.visible-*-*类，针对每种屏幕大小有三种变体，对应CSS中的不同display属性。
从v3.2.0版本起，形如.visible-*-*的类针对每种屏幕大小都有了三种变体，例如针对超小屏幕(xs)的类有.visible-xs-block、.visible-xs-inline和.visible-xs-inline-block。
与之相反的是.visible-xs、visible-sm、visible-md、visible-lg类，它们用于显示某个页面内容。
多重随机标签