本文详解如何通过 css 覆盖 bootstrap 默认的下拉箭头（caret）样式，实现初始状态指向右侧、点击展开后自动旋转为向下指的效果。
本文详解如何通过 css 覆盖 bootstrap 默认的下拉箭头（caret）样式，实现初始状态指向右侧、点击展开后自动旋转为向下指的效果。
在 Bootstrap 5+ 中，下拉菜单触发链接（.dropdown-toggle）右侧的三角形箭头并非独立 HTML 元素，而是由伪元素 ::after 渲染的 SVG 图标（内联于 CSS 变量中），其默认方向为向下（transform: rotate(0deg)）。要改变其初始朝向并响应展开状态切换，关键在于精准定位该伪元素，并利用 Bootstrap 自动添加的 .show 类进行状态控制。
✅ 正确的 CSS 覆盖方案
只需在 <style></style> 标签或自定义 CSS 文件中添加以下规则：
/* 初始状态：箭头向右（逆时针旋转 90°，即 -90deg） */
.dropdown-toggle::after {
transform: rotate(-90deg);
transition: transform 0.3s ease-in-out;
}
/* 展开状态：箭头向下（恢复默认角度 0deg） */
.dropdown-toggle.show::after {
transform: rotate(0deg);
}
? 原理说明：Bootstrap 在下拉菜单激活时，会为
.dropdown-toggle元素动态添加.show类（同时为.dropdown-menu添加同名类）。因此，我们无需 JavaScript 监听事件，仅靠 CSS 类状态切换即可驱动动画。
? 完整可运行示例（含关键修复）
以下为精简后的完整 HTML 示例（已修复原代码中无效的选择器和缺失的 transition）：
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap Dropdown Caret Rotation</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><style>
.dropdown-toggle::after {
transform: rotate(-90deg);
transition: transform 0.3s ease-in-out;
}
.dropdown-toggle.show::after {
transform: rotate(0deg);
}
</style><nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
⚠️ 注意事项与最佳实践
-
避免使用过时选择器：原问题中尝试的
.navbar-nav > li > a:focus .caret是错误的——Bootstrap 5 已移除.caret类，且:focus并非展开状态的可靠标识；应始终基于.show类操作。 -
确保
transition生效：务必为transform单独设置transition，否则旋转无动画效果。 -
兼容性考虑：该方案适用于 Bootstrap 5.2+（含 5.3.x）。若使用 Bootstrap 4，请改用
.dropdown-toggle::after { transform: rotate(-90deg); }并配合.dropdown.show .dropdown-toggle::after。 -
无障碍友好：旋转不影响
aria-expanded语义，屏幕阅读器仍能正确播报菜单状态，无需额外 ARIA 操作。
通过以上方法，你不仅能精准控制箭头方向，还能获得平滑的过渡动画，显著提升 UI 交互的专业感与一致性。
