二、速览 Web框架 BootStrap4 —— BootStrap4布局

布局

Col栅格布局

布局方法

• .container 固定尺寸；.container-fluid 宽度拉满。
• 每行默认分成12份，例如 col-sm-4 占4份，即1/3。
• 可以用 .w-100 折行

  <div class="container">
      <div class="row">
          <div class="col-sm-4">第一列</div>
          <div class="col-sm-4">第二列</div>
          <div class="col-sm-4">第三列</div>
      </div>
  </div>
  <div class="container-fluid">
      <div class="row">
          <div class="col-sm-2">第一列</div>
          <div class="col-sm-5">第二列</div>
          <div class="col-sm-3">第三列</div>
      </div>
  </div>
  

对齐方法

• 水平定位

• justify-content-center, justify-content-end

• justify-content-around, justify-content-between

• 垂直定位

• .align-items-center, .align-items-end

• .align-self-center, .align-self-end

• 排序 .order-3

Flex弹性布局

布局方法

• .d-flex flex-row-reverse 水平布局，然后反转
• .d-flex flex-column 垂直布局

对齐方法

• .justify-content-center 子元素内容水平居中 (start、end、between、around)

• .align-content-center 子元素内容垂直居中 (start、end、between、around)

• .align-items-center 子元素项目垂直居中 (start、end、baseline、stretch)

• .align-self-center 单项目垂直居中 (start、end、baseline、stretch)

• .flex-fill 子盒子填满剩余

• .flex-grow-* 0或1，是否填满剩余

• .flex-shrink-* 0或1，是否强制换行

• .mr-auto .ml-auto 水平布局时对flex元素进行浮动对齐

• .mb-auto .mt-auto 垂直布局时对flex元素进行浮动对齐

• .flex-wrap 设置包裹，内容自动换行

• .flex-wrap-reverse 反转

• .order-* 指定顺序