Bootstrap4 网格系统

Bootstrap4 网格系统(使用记录)

注：Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

1. Bootstrap 4 网格系统有以下 5 个类:
   (1).col- 针对所有设备
   (2).col-sm- 平板 - 屏幕宽度等于或大于 576px
   (3).col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
   (4).col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
   (5).col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
2. 网格基本结构

<!-- 第一个例子：控制列的宽度及在不同的设备上如何显示 -->
<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
 
<!-- 第二个例子：或让 Bootstrap 者自动处理布局 -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"