下拉菜单箭头不显示是因为缺少dropdown父容器；必须将dropdown类加在触发按钮和ul.dropdown-menu的共同父元素上，否则伪元素箭头无法渲染且菜单可能错位。
下拉菜单箭头不显示？检查 dropdown-menu 是否漏了 dropdown 父容器
Bootstrap 的下拉箭头（小三角）不是靠 CSS 伪元素硬写的，而是依赖父级 dropdown 类触发的定位逻辑和子元素默认样式。如果只给 ul 加 dropdown-menu，箭头不会出现，甚至整个菜单可能错位。
-
dropdown必须加在触发按钮和菜单共同的最近父容器上（通常是div） - 触发按钮需带
dropdown-toggle和data-bs-toggle="dropdown" - 菜单本身是
ul.dropdown-menu，且必须直接位于dropdown容器内
正确结构示例：
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
菜单
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项1</a></li>
</ul>
</div>
箭头颜色或位置不对？别动 ::before，改 dropdown-menu 的 data-bs-popper 属性
Bootstrap 5+ 使用 Popper.js 控制下拉定位，箭头由 dropdown-menu 的 ::before 伪元素生成，但它的方向、偏移、颜色都由 Popper 自动注入的 data-bs-popper 属性和 JS 计算决定。手动覆盖 ::before 很容易被重置或失效。
- 想改箭头颜色？用
.dropdown-menu::before { border-color: #0d6efd !important; }—— 但仅限简单场景，复杂主题建议走 Sass 变量 - 箭头偏左/偏右？检查触发按钮是否设置了
text-align或justify-content，Popper 默认以按钮内容盒中心对齐 - 箭头消失？浏览器控制台看是否有
Uncaught ReferenceError: Popper is not defined，说明 Popper 未加载或版本不匹配
自定义箭头形状（比如双箭头、圆点）？绕开 dropdown-menu 的伪元素，用 dropdown-item 内嵌图标
原生箭头只是个三角，没法改成 > 或 ▼ 这类符号。真要换形，最稳的方式是放弃伪元素，把箭头变成菜单项的一部分。
- 在每个
dropdown-item末尾加<span class="float-end">▶</span>，再用.dropdown-item { padding-right: 2rem; }预留空间 - 若需响应式箭头（如悬停时变色），给
span加dropdown-item:hover .float-end选择器 - 注意：这样会丢失原生箭头的“菜单整体指示”语义，屏幕阅读器可能无法识别层级关系
移动端点击无反应？确认 data-bs-toggle 没被 Vue/React 事件拦截
在框架项目里，下拉菜单常点不开，不是 Bootstrap 问题，而是 click 事件被组件劫持了。Vue 的 @click.stop、React 的 event.stopPropagation() 都会阻断 dropdown-toggle 的监听链。
- 检查按钮上有没有
@click.stop或onClick={e => e.stopPropagation()} - 改用
@click.native.stop（Vue 2）或v-click-outside插件替代原生 toggle - 或者干脆不用
data-bs-toggle，手写 JS 调用new bootstrap.Dropdown(element)实例
箭头本身不难画，难的是它背后那套定位、事件、可访问性交织的逻辑。很多人卡在「看起来没箭头」，其实真正卡点是 Popper 没跑起来，或是父容器类名断了链。
