Bootstrap 栅格系统详解
12列布局/断点/偏移/嵌套/对齐 · 难度:入门 · +15XP
Bootstrap 栅格系统
| 断点 | 宽度 | 设备 |
|---|---|---|
| .col- | <576px | 手机纵 |
| .col-sm- | ≥576 | 手机横 |
| .col-md- | ≥768 | 平板 |
| .col-lg- | ≥992 | 笔记本 |
| .col-xl- | ≥1200 | 桌面 |
| .col-xxl- | ≥1400 | 宽屏 |
<div class="row"><div class="col-md-6 col-lg-4">平板半宽,桌面1/3</div><div class="col-md-6 col-lg-8">平板半宽,桌面2/3</div></div>
// 偏移: offset-md-2 向右偏移2列
// 对齐: justify-content-center align-items-center