需为.blockquote添加padding-top: 1.2rem预留引号空间，用font-size和line-height: 1控制::before高度，避免遮挡.blockquote-footer；多行footer加word-break: break-word；响应式用clamp()，Font Awesome需匹配font-family与font-weight。
blockquote 的默认 Bootstrap 样式偏简陋，直接加 CSS 容易和 .blockquote-footer 冲突或破坏流式布局。核心是控制伪元素定位、留出足够内边距、避免覆盖 footer。
用 ::before 添加引号时，为什么 footer 被遮住了？
因为 ::before 默认是绝对定位，且没有限制高度，容易压住下方的 .blockquote-footer。不是靠 z-index 解决——伪元素本就在内容层之上，而是要让 .blockquote 自身“腾出空间”：
- 给
.blockquote加padding-top: 1.2rem，为引号视觉高度预留位置 - 避免对
::before设置height，改用font-size+line-height: 1控制实际占用区域 -
.blockquote-footer默认margin-top: 0.75rem，若引号太大，这个间距就不够，需同步加大 - 如果 footer 文字多行，加
word-break: break-word防溢出
响应式引号大小怎么写才不崩？
固定 font-size: 3rem 在小屏上会撑破容器。用 clamp() 是目前最稳妥的方案，它能保证最小、最大和视口比例间的平滑过渡：
.blockquote::before {
font-size: clamp(1.5rem, 4vw, 3rem);
}
-
1.5rem是最小值，保障小屏可读 -
4vw是弹性中间值，随屏幕宽度线性缩放 -
3rem是上限，防大屏下过大失衡 - 注意：IE 不支持
clamp()，如需兼容，得回退到媒体查询分段写
用 Font Awesome 图标替代引号要注意什么？
用字体图标比纯字符更可控，但必须显式声明字体族，否则显示成方块：
.blockquote::before {
content: "\f10d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
-
content中的 Unicode 必须和所用 FA 版本一致（\f10d是 quote-left，FA 5 Free Solid） -
font-weight: 900是必须的，否则图标可能显示为空心或缺失 - 如果项目用的是 FA 6 或 CDN 引入方式不同，
font-family值要相应改成"Font Awesome 6 Free"或检查实际加载的字体名
.blockquote-reverse 和自定义右对齐冲突怎么办？
Bootstrap 3 的 .pull-right 或 v4+ 的 .blockquote-reverse 本质是浮动或 flex 反向，会干扰 ::before 的 left/right 定位逻辑：
立即学习“前端免费学习笔记（深入）”；
- 不要在已加
.blockquote-reverse的元素上还写left: -1.2rem—— 应该换用right: -1.2rem并配合transform: translateY(-50%) - 更稳妥的做法是抽离出独立 class，比如
.blockquote--right-quote，内部用text-align: right+direction: rtl控制伪元素流向，避免依赖浮动 - 如果同时用了
display: flex布局，伪元素的position: absolute可能脱离 flex 容器，此时需确保父级position: relative显式存在
.blockquote 预留顶部空间，或者忘了 line-height: 1 对引号垂直居中的关键作用。 
