应强制.modal-dialog在超小屏下设width:100%和max-width:100%，并对.modal-body启用overflow-wrap:break-word以防止长文本撑破viewport。
模态框内容撑破 viewport 导致横向滚动
超小屏（比如 iPhone SE、Android 低端机）下，.modal-dialog 默认宽度（如 500px）或内部元素（如长英文单词、未断行的 license 编号）会直接突破屏幕宽度，触发横向滚动条。这不是“样式没加”，而是默认行为没被覆盖——Bootstrap 的 .modal-dialog 在 sm 断点以下仍保留固定宽，且内部文本无换行策略。
关键动作是两层控制：
- 强制
.modal-dialog在超小屏下用width: 100%+max-width: 100%（不能只写一个） - 对模态框内所有可能溢出的文本容器（如
.modal-body p、.modal-body li）启用word-break: break-word或overflow-wrap: break-word - 禁用
white-space: nowrap（常见于按钮、标签、图标旁文字）
Bootstrap 5 中 modal 的移动端适配要点
Bootstrap 5 的 .modal-dialog 默认在 sm（576px）起才应用响应式宽度，但超小屏（320px–375px）仍可能被忽略。别依赖它自动收缩——手动补媒体查询更可靠：
@media (max-width: 375px) {
.modal-dialog {
margin: 0.5rem;
width: 100%;
max-width: 100%;
}
.modal-content {
border-radius: 0.5rem;
}
}
注意：不要用 !important 覆盖 .modal-dialog 的 margin，否则会导致顶部/底部留白失控；用更具体的媒体查询选择器即可。
长英文/混合文本在 modal-body 中不换行
像 FSSAI-100123456789012、ISO/IEC 27001:2022 这类字符串，浏览器默认不会在 /、-、: 处换行，必须显式声明断点策略：
- 对整个
.modal-body加overflow-wrap: break-word（推荐，语义清晰） - 若需兼容老版 Safari（iOS 12 及更早），加
word-break: break-all作为兜底（但慎用，它会在任意字母间断开） - 避免只设
white-space: normal——它只对空格和换行符生效，对连字符无效
示例：
.modal-body {
overflow-wrap: break-word;
word-break: break-word; /* Firefox 兼容 */
}
滚动行为错乱：modal-body 内部无法垂直滚动
当模态框内容高度超过屏幕，又没设置正确高度约束时，会出现两种错误：一是整个页面滚动（body 被顶起），二是 .modal-body 不滚动、内容被截断。根本原因是 .modal-body 缺少 max-height 和 overflow-y: auto。
正确做法：
-
.modal-body必须设max-height: calc(100vh - 200px)（减去 header/footer 高度） - 同时加
overflow-y: auto，并确保父级.modal-content没有overflow: hidden - 如果用了自定义关闭按钮或 footer，要重新计算
200px这个值，或改用clamp()动态处理（如max-height: clamp(200px, 60vh, 400px)）
超小屏上，vh 单位在 iOS Safari 中有缩放 bug（地址栏收起/展开时值跳变），所以建议优先用 clamp() 或 JS 动态修正。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
