Bootstrap 5宽高工具类需注意：w-100/h-100依赖父容器尺寸，全屏高度应使用min-vh-100并确保html/body高度声明；modal-dialog宽高须通过max-width/max-height或CSS变量控制；自定义checkbox需调整伪元素而非原生input尺寸。
直接用 w-* 和 h-* 工具类最简单
Bootstrap 5 内置了预设的宽高工具类，比如 w-25、w-50、w-75、w-100、w-auto，对应 width: 25% / 50% / 75% / 100% / auto；高度同理有 h-25 到 h-100 和 h-auto。这些类直接加在元素上就生效，无需写额外 CSS。
常见误用点：
-
w-100不等于“撑满整个屏幕”，它只是占父容器宽度的 100%，如果父容器本身被限制（如.container），那它最多也就那么宽 -
h-100在多数情况下无效——因为它的计算依赖父级有明确高度，而默认html和body没设height: 100%，所以通常得配合min-vh-100或手动补全祖先高度声明 -
w-auto对select特别有用：它能覆盖form-control的width: 100%，让下拉框按最长选项自然收缩，避免留白过大
min-vh-100 才是真正“全屏高度”的正确解
想让某个区块（比如首页 banner）至少占满一屏？别用 h-100 或 style="height: 100vh"。前者常因祖先无高而塌缩，后者在 iOS Safari 地址栏收放时会跳变。
应该：
- 把
min-vh-100加在.container的**直接父级**上（比如<section class="min-vh-100"><div class="container">...</div></section>） - 同时确保
html, body { margin: 0; padding: 0; height: 100%; }，否则某些嵌套场景下仍不生效 - 如果有固定 header/footer，改用 flex 布局：
，再给主内容区加flex-grow-1
模态框（modal-dialog）改宽高必须动 max-width 和 max-height
给 modal-dialog 直接写 width: 800px 或 style="width: 90%" 基本没用——Bootstrap 5 居中靠 transform: translate(-50%, -50%)，宽度不参与定位计算，硬设反而会让锚点偏移、视觉错位。
正确姿势：
- 加自定义类到
modal-dialog，例如class="modal-dialog modal-wide-850"，然后在 CSS 中写.modal-wide-850 { max-width: 850px; } - Bootstrap 5.2+ 更推荐内联 CSS 变量：
<div class="modal-dialog" style="--bs-modal-max-width: 850px;">，它优先级高且自动适配断点<li>调高度不能只改 <code>modal-dialog的max-height，还得约束modal-body：max-height: calc(100vh - 180px)+overflow-y: auto，并确保modal-content是display: flex; flex-direction: column -
::before控制未选中状态的外框：改width/height同时必须同步调top/left，否则会脱离 label 文本基线 -
::after绘制对勾：它是用 border + transform 画的，缩放时要同比例减小border-width和transform偏移量，不然对勾会错位或被裁 - 临时调试可用
transform: scale(1.2)，但会导致模糊、点击热区偏移，上线前务必换成伪元素方案
自定义 checkbox 尺寸不能碰 width/height，得改伪元素
原生 input[type="checkbox"] 上写 width: 16px; height: 16px; 在 Chrome/Firefox 中基本被忽略——浏览器 UA 样式强约束，Bootstrap 5 的 .form-check-input 也刻意没开放尺寸接口。
真正可控的是它的两个伪元素：
复杂点在于：所有尺寸调整都牵扯布局上下文。比如改 checkbox 大小要同步微调 margin-top 来对齐文字；改 modal 宽度要检查是否破坏响应式断点；设全高容器得先理清 html/body 的高度链。没一个能“单独改完就完事”。
