Bootstrap/布局
Bootstrap/布局
断点
Breakpoint | Class infix | Dimensions |
---|---|---|
Extra small | None | <576px |
Small | sm |
≥576px |
Medium | md |
≥768px |
Large | lg |
≥992px |
Extra large | xl |
≥1200px |
Extra extra large | xxl |
≥1400px |
容器
容器可以分为
- 默认容器:
.container
- 响应式容器:
.container-{breakpoint}
- 流动容器:
.container-fluid
The table below illustrates how each container’s max-width compares to the original .container and .container-fluid across each breakpoint.
See them in action and compare them in our Grid example.
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
网格
列
沟槽
posted on 2024-07-02 15:54 RandolphChen 阅读(36) 评论(0) 编辑 收藏 举报