Bootstrap各屏幕尺寸怎么划分-Bootstrap教程-PHP中文网

Bootstrap v4/v5标准断点为：xs（无查询，默认）、sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）、xxl（≥1400px，v5新增），均为min-width语义，持续生效至更大屏幕；container宽度则按断点阶梯式设定版心尺寸，非简单等于断点值。

bootstrap各屏幕尺寸怎么划分

Bootstrap 的屏幕尺寸划分不是凭空定的，而是基于主流设备视口宽度统计和渐进式适配逻辑确定的。不同版本略有差异，但 v4/v5 的标准划分最常用、也最值得你记牢。

Bootstrap v4/v5 的断点定义（`min-width`）

这是你在写 @media 或用 col-sm-* 这类类名时真正起作用的临界值：

xs：无媒体查询，适用于所有屏幕（即默认行为），对应 max-width: 575.98px
sm：≥576px，典型手机横屏、小平板竖屏
md：≥768px，主流平板（iPad 竖屏起始）、小桌面
lg：≥992px，中等桌面显示器
xl：≥1200px，大桌面或宽屏笔记本
xxl（v5 新增）：≥1400px，超宽屏场景

注意：这些是 min-width 断点，不是区间。比如 col-md-6 在 ≥768px 时生效，并**持续生效**到更大屏幕，除非你显式覆盖（如加 col-lg-4）。

`container` 宽度如何随断点变化

容器宽度不等于断点值，而是设计团队权衡内容可读性与留白后定的“版心”尺寸：

xs（width: 100%，撑满视口
sm（≥576px）：width: 540px
md（≥768px）：width: 720px
lg（≥992px）：width: 960px
xl（≥1200px）：width: 1140px
xxl（≥1400px）：width: 1320px

这些值在 _variables.scss 中可修改，但直接改需同步调整栅格计算逻辑。多数项目只需理解它“为什么是这个数”——比如 720px 是为保证 12 列网格在 768px 屏上每列约 60px（含 gutter），文字阅读舒适。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

为什么你写的 `col-sm-6` 在手机上没反应

常见错因不是代码写错，而是忽略了 Bootstrap 的“移动优先 + 向上覆盖”规则：

没写 xs 类（如 col-6 或 col-12），则 sm 及以上类在 xs 下完全不生效，默认堆叠占满整行
col-sm-6 表示“从 sm 起才分两列”，xs 下仍是 col-12 行为（即独占一行）
想让手机也两列？必须显式写 col-6 col-sm-6，或只写 col-6（v5+ 支持）

另外检查是否漏了

 包裹 —— 没 row，col 的负 margin 和 flex 布局就失效，表现会完全错乱。自定义断点时最容易忽略的兼容点
如果你在 _custom.scss 里改了 $grid-breakpoints，务必同步处理：


$container-max-widths 必须按比例更新，否则 container 宽度和栅格列宽不匹配
所有依赖断点的 mixin（如 make-col-ready）会自动重算，但手写的 @media 查询不会——旧媒体查询可能卡在错误宽度
v4/v5 的 col-*-auto 和 col-*-* 计算逻辑不同，改断点后建议跑一遍栅格 demo 验证列宽精度

断点本身只是 CSS 媒体查询触发器，真正决定布局的是类名组合 + 容器约束 + flex 行为。别只盯着像素数字，重点看「哪个类在哪个视口生效」以及「生效后容器给它多大空间」。