Popover尖角方向由data-bs-placement属性控制，而非CSS；CSS仅能微调偏移、颜色、大小，且需同步修改::before和::after伪元素以保证一致。
Popover尖角方向由data-bs-placement控制，不是CSS决定的
Bootstrap 5 的 Popover 尖角（arrow）位置完全由 data-bs-placement 属性驱动，比如 top、bottom、left、right。你不能靠纯 CSS 把 data-bs-placement="top" 的箭头“强行拉到右边”——那会破坏 Popover 的定位逻辑，导致箭头错位或消失。
真正能用 CSS 干的事，是微调箭头的偏移、颜色、大小，或者覆盖默认的 transform 定位。但前提是：先选对 data-bs-placement 值。
-
data-bs-placement="top"→ 箭头在弹出框底部中央，指向触发元素上方 -
data-bs-placement="bottom"→ 箭头在顶部中央，指向下方 -
data-bs-placement="left"→ 箭头在右侧中央，指向左 -
data-bs-placement="right"→ 箭头在左侧中央，指向右
想让箭头“不居中”，比如靠右一点？改margin-inline-start或transform
Bootstrap 默认把箭头用 position: absolute 居中放置（比如 top: 100% + left: 50% + transform: translateX(-50%)）。要让它偏移，得覆盖这个 transform 或调整 margin。
例如：让 data-bs-placement="top" 的箭头往右偏 12px：
立即学习“前端免费学习笔记（深入）”；
.popover .popover-arrow::before,
.popover .popover-arrow::after {
left: calc(50% + 12px) !important;
transform: translateX(-50%) !important;
}
注意：::before 是外层阴影箭头，::after 是内层实色箭头，两个都要改才一致。只改一个会导致颜色/尺寸错位。
- 别用
left: 60%这类固定百分比——不同宽度触发器下偏移量会失准 - 优先用
calc(50% + Xpx)，保证基础居中再微调 - 如果用了
data-bs-container="body"，记得 CSS 作用域要匹配实际渲染位置（可能不在原 DOM 节点下）
自定义箭头颜色和大小，直接覆盖::before/::after伪元素
Bootstrap 箭头本质是两个重叠的三角形伪元素，靠 border 和 rotate 实现。改颜色只需覆盖 border-color，改大小则调 width/height 或 border-width。
例如：深灰箭头 + 稍大尺寸（默认约 0.4rem）：
.popover .popover-arrow::before {
border-top-color: #333 !important;
width: 12px !important;
height: 12px !important;
}
.popover .popover-arrow::after {
border-top-color: #fff !important;
width: 10px !important;
height: 10px !important;
}
关键点：
-
::before的 border 颜色 = 外框色，::after= 内容背景色 - 改
width/height比改border-width更可控（后者会影响三角形角度） - 如果 Popover 有
data-bs-custom-class，建议把自定义样式写在该 class 下，避免全局污染
移动端或小屏幕下箭头错位？检查popper的strategy和boundary
Popover 底层用 Popper.js 定位，当容器空间不足时，Popper 可能自动翻转 placement（比如从 top 切成 bottom），但箭头样式没同步更新——看起来就像“箭头还在上面，内容却跑下面去了”。
解决方法不是硬写 CSS，而是约束 Popper 行为：
const popover = new bootstrap.Popover(element, {
placement: 'top',
fallbackPlacements: [], // 禁用自动翻转
boundary: 'viewport', // 或指定父容器 selector
strategy: 'fixed' // 避免滚动时错位（慎用，影响性能）
});
常见坑：
-
fallbackPlacements: []会让 Popover 在空间不够时直接隐藏，而不是乱翻转 -
boundary: 'window'和'viewport'效果不同：前者含滚动条区域，后者不含 - 用
strategy: 'fixed'后，箭头位置不再随页面滚动更新，适合固定定位场景
箭头位置问题，90% 出在 placement 配置和 Popper 策略上，而不是 CSS 写得不够多。先确认 JS 初始化参数，再动样式。
