根本原因是富文本编辑器动态注入的节点默认 content-box，与Bootstrap的border-box设计隐式冲突；必须在所有CSS最顶部声明, ::before, *::after { box-sizing: border-box; }才能确保伪元素和动态节点统一盒模型。
根本原因不是富文本编辑器“破坏”了 Bootstrap，而是它动态注入的 HTML 节点（尤其是带内联 style 或依赖 content-box 的伪元素）与 Bootstrap 的基础 CSS 假设发生隐式冲突——最典型的是 box-sizing 混用和 margin/padding 继承链断裂。
富文本插入的节点默认走 content-box，但 Bootstrap 容器设了 border-box
Bootstrap 的栅格、卡片、表单控件等都基于 box-sizing: border-box 设计；而富文本编辑器（如 Quill、Tiptap）插入的 blockquote::before、pre code、ol li::before 等节点，若未显式覆盖，仍按浏览器默认的 content-box 计算尺寸。一旦这些节点带 padding 或 border，就会额外撑开宽度，导致：
- 引用块整体右移，破坏栅格对齐
- 有序列表文字换行，序号区域变宽
- 粘贴进来的 Word 内容带
style="padding: 12px"，在max-width: 100%的 Bootstrap 容器里直接溢出
Bootstrap 的 normalize 行为被富文本的内联样式绕过
Bootstrap 5+ 内置了类似 Normalize 的基础重置逻辑，但它只作用于初始 DOM；富文本编辑器通过 document.execCommand 或 insertNode 动态插入的节点，会跳过这层重置，直接继承 user agent stylesheet 的原始值。常见表现：
-
h2标签插入后没margin-top，紧贴上一段文字（因富文本输出的h2没被 Bootstrap 的h1, h2, h3 {... margin-top: ...}规则捕获） -
pre里的code没background-color，因为富文本插件自己写了pre { background: #f8f9fa }，却漏掉了code子元素 - 第三方插件插入的复制按钮（
pre::after）带padding: 4px，但没设box-sizing: border-box，实际占宽 = 宽度 + 8px
解决必须前置全局 box-sizing，且不能只作用于编辑器容器
只给 .ql-editor 或 [contenteditable] 加 box-sizing: border-box 不够——伪元素和动态插入节点不受影响。真正起效的是这条规则，且必须出现在所有 CSS 的最顶部（包括 Bootstrap 的 bootstrap.min.css 之前）：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after {
box-sizing: border-box;
}注意：
- 这条规则不能写在
<style scoped></style>或组件级 CSS 里，否则不生效 - 如果项目已用 Tailwind，它的
@layer base默认就包含该规则，但需确认它是否真的在 Bootstrap 之前加载 - 某些富文本插件（如 CKEditor 5）会强制注入自己的 reset.css，得用
!important覆盖其* { box-sizing: content-box }
字体发虚、按钮错位等“副作用”往往源于 CSS 加载顺序错乱
当富文本 JS 文件异步加载，又在 DOMContentLoaded 后才注入样式，就可能造成「先渲染无样式的 HTML，再补样式」的闪烁或错位。更隐蔽的问题是：
- Bootstrap 的
button.btn样式被富文本插件的.ql-toolbar button覆盖，因为后者选择器更具体 - 富文本插件自带的
font-family: -apple-system, BlinkMacSystemFont, ...和 Bootstrap 的font-family: var(--bs-font-sans-serif)冲突，导致按钮文字突然变细 - 本地开发时用
file://协议加载，富文本插件的字体文件因 CORS 被拒，回退到系统字体，看起来像“发虚”
这类问题不会报错，但会在开发者工具的 Styles 面板里暴露：错乱元素的 computed 样式中，关键属性（如 box-sizing、margin、font-family）来源不是你预期的那条规则。
