BOOTSTRAP4的栅格系统详解

简介

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

网格类
Bootstrap 4 网格系统有以下 5 个类:
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px
列与列间隔30px

布局

定义了几个类型的布局容器，会在相应设备上进行响应，如.container-md容易，在屏宽<768时会满屏不留margin和panding。

网格系统规则

Bootstrap4 网格系统规则:

• 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
• 使用行来创建水平的列组。
• 内容需要放置在列中，并且只有列可以是行的直接子节点。
• 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
• 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
• 网格列是通过跨越指定的 12 个列来创建。例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。
• Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。

下表总结了 Bootstrap 网格系统如何在不同设备上工作的：

套用格式

必须套在container-fluid >row 中或container>row中

<div class="container-fluid">
  <div class="row">
    <div class="col"> </div>
  </div>
</div>

等宽列

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

等宽响应式列

<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>

即屏幕宽度小于sm尺寸 576px 时，每列都是全宽，大于576px时，四列均分屏宽

多屏响应式列

  <div class="row">
    <div class="col-sm-3 col-md-6"> col-sm-3 col-md-6 </div>
    <div class="col-sm-9 col-md-6"> col-sm-9 col-md-6 </div>
  </div>

桌面设备的显示器>md768px上两个列的宽度各占 50%，如果在平板端>sm576且<md768则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠全宽显示。

强制换行或间隔

 <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>

w-25 w-50等可以分别嵌入一个25%和50%的空白区域，w-100强制块换行

指定其中一列宽度

  <div class="col"> 1 of 3 </div>
  <div class="col-6"> 2 of 3 (wider) </div>
  <div class="col"> 3 of 3 </div>

第二个div占一半宽度，另外两个左右均分余下宽度

随内容的可变宽度

<div class="row justify-content-md-center">
  <div class="col col-lg-2"> 1 of 3 </div>
  <div class="col-md-auto"> Variable width content </div>
  <div class="col col-lg-2"> 3 of 3 </div>
</div>

row的 justify-content-md-center可以让块居中
屏宽>lg960时，左右两列各占2栅格，中间列由文字内容决定宽度
屏宽>md720且<lg960时，左右失限填满左右空间，中间由文字内容决定宽度
屏宽<md720时，三列失限占全宽，成为三行

行列限定

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

row-cols-2指定本row每行只能包括两个col。每个col也可以指定宽度，但总宽大于12时仍然会换行溢出。

垂直位置

<div class="row align-items-start">
<div class="row align-items-center">
<div class="row align-items-end">   
......
<div class="col align-self-start">
<div class="col align-self-center">
<div class="col align-self-center">

使行内的col块在行中垂直位置定位。align-self控制col本身,align-items控制内部col

水平位置

<div class="row justify-content-start"> 内部col靠左
<div class="row justify-content-center">内部col居中
<div class="row justify-content-end">内部col靠右
<div class="row justify-content-around">内部col均分列，最边缘的col左右有空隙
<div class="row justify-content-around">内部col均分列，最边缘的col左右紧贴外边缘

列重新排序

<div class="container">
  <div class="row">
    <div class="col"> First in DOM, no order applied </div>
    <div class="col order-12"> Second in DOM, with a larger order </div>
    <div class="col order-1"> Third in DOM, with an order of 1 </div>
  </div>
</div>

order-1的列会放在order-12前面

偏移

<div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>

两个块中间会有一个col-md-4尺寸的空白，即第二个col左侧多了一个同等尺寸的margin-left

margin utilities

可以使用margin utilities 例如.mr-auto将同级列强制彼此分开。

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>  //左侧留空，本块贴到右边
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> //左侧留空
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> //左侧留空
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>  //右侧留空，把下一个col挤到最右边
    <div class="col-auto">.col-auto</div>
  </div>
</div>

嵌套

  <div class="row">
    <div class="col-sm-9 bg-danger"> Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6 bg-dark"> Level 2: .col-8 .col-sm-6 </div>
        <div class="col-4 col-sm-6 bg-info"> Level 2: .col-4 .col-sm-6 </div>
      </div>
    </div>
    <div class="col-sm-3 bg-secondary"> Level 1: .col-sm-3 </div>
  </div>

技巧

水平堆叠的技巧

为了节省空间使用一组.col-sm-*类，可以创建一个基本的网格系统，该系统屏宽<SM时变为水平。其它时候按列宽排列