Bootstrap栅格系统

详情可见
1.Bootstrap栅格系统

 1.Bootstrap栅格系统
    Bootstrap的栅格系统使用一系列的"行"和"列"来实现复杂的响应式布局
    默认情况下栅格系统会将一行的内容等分为12份,
    然后我们可以通过绑定类名的方式指定这一行中的每一列占用多少分

    2.Bootstrap栅格系统格式
    <容器>
        <行>
            <列>我们的内容</列>
            <列>我们的内容</列>
            ... ...
        </行>
    </容器>

   3.Bootstrap栅格系统特点
   3.1默认情况下行的宽度和所在容器一样
   3.2默认情况下所有列的宽度是等分所在行的宽度
   3.3可以通过col-num方式指定当前列占用12分之几
   3.4如果一行中内容的宽度超过了12分, 那么将自动换行

<div class="container">
    <span class="row">
        <div class="col-6">我是第1列</div>
        <div class="col">我是第2列</div>
        <div class="col">我是第3列</div>
    </span>
</div>

2.栅格系统列的尺寸设置

    1.1Bootstrap的固定宽度容器提供了5种响应的尺寸,
       同样Bootstrap也给列提供了5种响应的尺寸
    col-*:   设置超小屏幕
    col-sm-*:设置小屏幕
    col-md-*:设置中等屏幕
    col-lg-*:设置大屏幕
    col-xl-*:设置超大屏幕

    2.栅格系统列的尺寸特点
    1.如果只设置了小屏幕的大小, 那么大屏幕也会采用小屏幕设置的大小
    2.如果值设置了大屏幕的大小, 那么小屏幕默认100%
    3.如果大小屏幕都设置了大小, 那么在什么屏幕就显示什么尺寸

<div class="container">
    <span class="row">
        <div class="col-lg-2 col-xl-6">我是第1列</div>
        <div class="col-lg-4 col-xl-4">我是第2列</div>
        <div class="col-lg-6 col-xl-2">我是第3列</div>
    </span>
</div>

3.栅格系统-沟槽

 栅格系统-沟槽
    BootStrap默认的栅格和列间有间隙沟槽，一般是左右-15px的margin或padding
    处理，您可以使用.no-gutters类来消除它，这将影响到.row行、列平行间隙及
    所有子列
    contariner中使用px-0来消除间隙沟槽

<div class="container px-0">
    <span class="row no-gutters">
        <div class="col-6">我是第1列</div>
        <div class="col-2">我是第2列</div>
        <div class="col-2">我是第3列</div>
    </span>
</div>

4.栅格系统列-对齐方式

 Bootstrap4的格栅系统是使用伸缩布局实现的, 所以也可以通过类名快速的设置伸
 缩项的在主轴和侧轴对齐方式
水平对齐
1、justify-content-start 左对齐
2、justify-content-center 居中对齐
3、justify-content-end 右对齐
4、justify-content-around 分散居中对齐（每个元素两侧的间距是相等的）
5、justify-content-between 左右两端对齐（元素之间的间距是自动平分的）

垂直对齐
1、align-items-start 顶对齐
2、align-items-center 中间对齐
3、align-items-end 底对齐

<div class="container">
    <!--<span class="row justify-content-between">-->
    <span class="row align-items-center">
        <div class="col-6">我是第1列</div>
        <div class="col-2">我是第2列</div>
        <div class="col-2">我是第3列</div>
    </span>
</div>

5.栅格系统-列偏移

offset-*: 但前列偏移多少份位置
    	  注意点: 写在那一列就是那一列偏移

<div class="container">
    <span class="row">
    	//偏移三份
        <div class="col-2 offset-3">1</div>
        <div class="col-2">2</div>
        <div class="col-2">3</div>
    </span>
</div>

6.栅格系统列-列排序

order-*: 从小到大顺序排序, 小的在前面, 大的在后面
         注意点: 没有排序的列位置不会发生变化, 只有排序的列才参与位置变化
         		 如果没有参与排序则不会排序还是以前的位置

<div class="container">
    <span class="row">
        <div class="col-2 order-3">1</div>
        <div class="col-2 order-2">2</div>
        <div class="col-2 order-1">3</div>
    </span>
</div>