怎么用Bootstrap设置元素宽高-Bootstrap教程-PHP中文网

Bootstrap 5宽高工具类需注意：w-100/h-100依赖父容器尺寸，全屏高度应使用min-vh-100并确保html/body高度声明；modal-dialog宽高须通过max-width/max-height或CSS变量控制；自定义checkbox需调整伪元素而非原生input尺寸。

怎么用bootstrap设置元素宽高

直接用 `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 的**直接父级**上（比如 ...）
同时确保 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%)，宽度不参与定位计算，硬设反而会让锚点偏移、视觉错位。

VPS Bootstrap

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

下载

正确姿势：

加自定义类到 modal-dialog，例如 class="modal-dialog modal-wide-850"，然后在 CSS 中写 .modal-wide-850 { max-width: 850px; }
Bootstrap 5.2+ 更推荐内联 CSS 变量：，它优先级高且自动适配断点
调高度不能只改 modal-dialog 的 max-height，还得约束 modal-body：max-height: calc(100vh - 180px) + overflow-y: auto，并确保 modal-content 是 display: flex; flex-direction: column


自定义 checkbox 尺寸不能碰 width/height，得改伪元素
原生 input[type="checkbox"] 上写 width: 16px; height: 16px; 在 Chrome/Firefox 中基本被忽略——浏览器 UA 样式强约束，Bootstrap 5 的 .form-check-input 也刻意没开放尺寸接口。
真正可控的是它的两个伪元素：


::before 控制未选中状态的外框：改 width/height 同时必须同步调 top/left，否则会脱离 label 文本基线

::after 绘制对勾：它是用 border + transform 画的，缩放时要同比例减小 border-width 和 transform 偏移量，不然对勾会错位或被裁
临时调试可用 transform: scale(1.2)，但会导致模糊、点击热区偏移，上线前务必换成伪元素方案

复杂点在于：所有尺寸调整都牵扯布局上下文。比如改 checkbox 大小要同步微调 margin-top 来对齐文字；改 modal 宽度要检查是否破坏响应式断点；设全高容器得先理清 html/body 的高度链。没一个能“单独改完就完事”。