- 首页
- 布局
- 栅格布局
栅格布局
12 列响应式栅格，容器用
row（flex 换行）或 row-flex（flex 不换行），列用 col-*，支持 7 个响应式断点。
断点一览
| 断点 | 前缀 | 说明 |
|---|---|---|
| <576px | col-xs- | 超小屏 |
| 576-767px | 无前缀 | 手机 |
| <768px | col-sm- | 手机端（响应式覆盖） |
| 768-991px | col-md- | 平板 |
| 992-1199px | col-lg- | 桌面 |
| 1200-1399px | col-xl- | 大桌面 |
| >=1400px | col-xxl- | 超大桌面 |
等分栅格
col-4
col-4
col-4
col-8
col-4
<div class="row">
<div class="col-4">...</div>
<div class="col-4">...</div>
<div class="col-4">...</div>
</div>
<div class="row">
<div class="col-8">...</div>
<div class="col-4">...</div>
</div>
自适应与撑满
<div class="row-flex">
<div class="col-auto">自适应</div>
<div class="col-other">撑满剩余</div>
<div class="col-auto">自适应</div>
</div>
响应式组合
<div class="row">
<div class="col-12 col-md-6 col-lg-4">...</div>
<div class="col-12 col-md-6 col-lg-4">...</div>
<div class="col-12 col-md-6 col-lg-4">...</div>
</div>
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页