Bootstrap 4 的布局系统 Grid System

最近又在纠结前端 CSS 框架的选择，在对比了 And Design，tailwindcss 之后，最终还是选择了 Bootstrap 4。

Bootstrap 4 相对 Bootstrap 3 还是有不少的变化。先记录一下 Grid System 的使用。

不变的风格

• 依旧是 container - row - col 的模式
• col 采用 12 等分

col 自动等分

如果不指定 col 所占的单元格数，Bootstrap 4 会对 col 自动进行等分。

例如，下面代码中，第一列与第二列各占一半。

<div class="container">
  <div class="row">
    <div class="col">
      第一列
    </div>
    <div class="col">
      第二列
    </div>
  </div>
</div>

break points 根据屏幕宽度分5档

• Extra small：<576px：前缀为 .col-
• Small：≥576px：前缀为 .col-sm-
• Medium：≥768px：前缀为 .col-md-
• Large：≥992px：前缀为 .col-lg-
• Extra large：≥1200px：前缀为 .col-xl-

应用于小尺寸屏幕的样式，将自动应用于所有更高尺寸的屏幕。

例如，应用于 .col-sm- 将自动应用于 .col-sm-， .col-md-，.col-lg-，.col-xl- 。

基于内部内容宽度自动调整

col-{breakpoint}-auto

使用场景：当周边 div 需要固定宽度，但是自己需要基于内容自动调整宽度。

w-100 是什么意思

• w-100：即 width: 100%
• mw-100：即 max-width: 100%

w-100 的作用

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

相当于强制换行。

不同设备宽度上，应用不同的宽度

col-12 col-md-8

offset

.col-md-4 .offset-md-4

参考

https://getbootstrap.com/docs/4.3/layout/grid/