直接用transform: scale()会破坏布局，因其仅缩放视觉呈现而不改变元素实际占用空间，导致错位、溢出及脱离文档流组件（如tooltip）失准；应改:root font-size并配合CSS变量统一缩放所有锚点尺寸。
为什么直接用 transform: scale() 会破坏 Bootstrap 组件布局
Bootstrap 的栅格、按钮、表单控件等严重依赖 em、rem 和固定像素（如 padding、border-radius）进行尺寸计算。一旦对父容器使用 transform: scale(0.8)，虽然视觉上缩小了，但元素的**布局占用空间不变**，导致错位、溢出、点击区域偏移——尤其是 dropdown、tooltip 这类脱离文档流的组件会完全失准。
用 CSS 变量统一控制 font-size 和间距比例
真正可控的方式是让 Bootstrap 的根字号和相对单位联动缩放。Bootstrap 5+ 默认以 :root 的 font-size 为基准（通常 16px），所有 rem 值都由此推导。因此只需动态改这个变量，再配合重置部分硬编码值即可。
实操建议：
- 在父容器上设置自定义属性，例如：
<div class="scale-container" style="--bs-scale: 0.75;"> <li>覆盖 Bootstrap 的根字号：<code>:root { font-size: calc(16px * var(--bs-scale, 1)); } - 重置那些不响应
rem的硬编码值，比如.btn的border-width（默认1px）：.scale-container .btn { border-width: calc(1px * var(--bs-scale, 1)); } - 注意
box-shadow、line-height等也需按比例缩放，否则看起来“发虚”或行距失调 - 给每个需缩放的容器加独立类名，如
scale-sm、scale-lg，并在其 CSS 中定义变量：.scale-sm { --bs-scale: 0.8; } - 所有依赖缩放的样式必须写在该容器后代选择器内，例如：
.scale-sm .btn { font-size: calc(0.875rem * var(--bs-scale)); } - Bootstrap 的
container、row等类本身不含rem外边距，需手动补：.scale-sm .container { padding-left: calc(1rem * var(--bs-scale)); } - 慎用
inherit或initial：子元素若未显式继承--bs-scale，会回退到浏览器默认值，导致比例断裂 - 用 CSS 变量替换所有绝对像素值：
--bs-border-width: 1px;→border: calc(var(--bs-border-width) * var(--bs-scale)) solid #dee2e6; - 重写
.form-control的height：去掉硬编码，改用min-height: calc(1.5em + 0.75rem + (2 * var(--bs-border-width) * var(--bs-scale)));} -
svg图标（如 Bootstrap Icons）需同步缩放：.scale-sm .bi { width: calc(1em * var(--bs-scale)); height: calc(1em * var(--bs-scale)); } - 测试
input:focus的 outline 偏移——它常基于像素偏移，也要按比例调整outline-offset
如何让不同父容器独立缩放互不干扰
关键在于避免全局 :root 被污染。不能把 --bs-scale 放在 :root，而应作用于局部作用域。
立即学习“前端免费学习笔记（深入）”；
正确做法：
缩放后表单控件和图标对齐失效怎么办
Bootstrap 的 .form-control 高度固定为 calc(1.5em + 0.75rem + 2px)，其中 1.5em 是行高，0.75rem 是 padding，2px 是 border。缩放时 em 和 rem 虽变，但 2px 不变，造成高度不协调。
解决路径：
缩放不是简单调个比例，而是要把所有“锚点”——字号、间距、边框、阴影、图标尺寸——全换成变量驱动，漏掉任何一个，就会在某个组件上突然崩掉。尤其注意第三方插件（如 Datepicker）往往绕过 Bootstrap 的变量体系，得单独打补丁。
