最安全的方法是直接修改 --bs-form-switch-handle-width 变量；Bootstrap 5 开关滑块尺寸由 --bs-form-switch-handle-width 和 --bs-form-switch-handle-height 控制，硬写 width/height 或用 transform: scale() 会破坏响应逻辑、点击区域和动画，且需同步调整 --bs-form-switch-padding-start 以匹配新尺寸，移动端点不准应优化 label 包裹和父容器 padding 而非滑块本身。
直接改 --bs-form-switch-handle-width 变量最安全
Bootstrap 5 的开关滑块不是用 width 或 height 控制的，而是通过 CSS 自定义属性 --bs-form-switch-handle-width 和 --bs-form-switch-handle-height 定义尺寸。硬写 .form-check-input::after { width: 20px } 会绕过框架响应逻辑，且在深色模式下可能失效。
正确做法是在全局样式或组件作用域内覆盖变量：
:root {
--bs-form-switch-handle-width: 1.75rem;
--bs-form-switch-handle-height: 1.75rem;
}
注意：这两个变量只影响滑块（::after 伪元素）本身，不影响整个开关容器宽度——那由父级 .form-switch 的 padding 和内部布局决定。
为什么不能只调 transform: scale()？
有人试过给 .form-check-input::after 加 transform: scale(1.2) 来“放大滑块”，结果出现三个问题：
立即学习“前端免费学习笔记（深入）”；
- 滑块边缘模糊（非整像素缩放触发亚像素渲染）
- 点击区域没同步变大，用户点中视觉滑块却没触发状态切换
- 和
form-switch内置的过渡动画冲突，导致滑动卡顿或跳帧
根本原因是 scale() 只改了渲染层，没改语义尺寸和事件绑定范围。真正要改大小，就得从变量源头入手，让 Bootstrap 的计算逻辑重新生效。
创建并切换AI助手人格。使用 /personality 列出并激活已保存的人格；使用 /create-personality 设计新角色，自动填充 SOUL 与 IDENTITY。跨会话和对话压缩时人格持久化，自动恢复心跳。原子切换提供备份与回滚保护，切换前始终备份当前状态。
自定义尺寸时必须同步调整 --bs-form-switch-padding-start
滑块变大后，如果底色区域（track）没跟着拓宽，会出现滑块“悬空”或“顶到边缘”的现象。这是因为 Bootstrap 用 --bs-form-switch-padding-start 控制左侧留白，它默认值是 2.375rem，刚好匹配原始滑块尺寸。
当把滑块设为 2rem 宽时，建议同步设置：
.form-switch {
--bs-form-switch-padding-start: 2.625rem;
}
计算逻辑很简单：padding-start = handle-width + 0.625rem（0.625rem 是固定间隙）。不调这个，滑块右移后右侧会挤出空白或溢出容器。
移动端手指点击区域太小？别碰滑块尺寸，改父容器 padding
用户反馈“手机上老是点不中”，其实问题不在滑块本身，而在可点击热区。原生 input 的点击区域只有几像素，Bootstrap 靠 .form-check-label 扩展了区域，但自定义尺寸后容易破坏这个机制。
解决方法不是把滑块拉得更大，而是确保：
-
label标签完整包裹input（不能只包文字） - 给
.form-check加足够padding，比如padding: 0.375rem 0，让整个行都可点 - 避免对
.form-check-input设margin或position: absolute，否则 label 的点击范围会错位
滑块视觉尺寸和实际交互区域是两回事，混淆这两者是绝大多数“点不准”问题的根源。
