本文详解如何通过 CSS 覆盖 Bootstrap 默认的下拉箭头（caret）样式，实现初始状态向右旋转 90°，点击展开后自动转为向下（0°），利用 .dropdown-toggle::after 伪元素与 .show 类动态控制旋转动画。
本文详解如何通过 css 覆盖 bootstrap 默认的下拉箭头（caret）样式，实现初始状态向右旋转 90°，点击展开后自动转为向下（0°），利用 `.dropdown-toggle::after` 伪元素与 `.show` 类动态控制旋转动画。
在 Bootstrap 5 中，下拉菜单触发器（如 <a class="nav-link dropdown-toggle"></a>）右侧的三角形箭头并非独立 HTML 元素，而是由 ::after 伪元素渲染的 SVG 图标（通过 background-image 或 mask-image 实现，具体取决于版本），其默认方向为向下。要改变其初始指向并实现展开/收起时的方向切换，关键在于精准定位该伪元素，并利用 Bootstrap 自动添加的 .show 类进行状态控制。
✅ 正确的 CSS 方案
Bootstrap 5.3+ 使用 mask-image + background-color 渲染 caret，因此需直接操作 ::after 的 transform 属性。以下 CSS 即可满足需求：
/* 初始状态：箭头向右（逆时针旋转 90°） */
.dropdown-toggle::after {
transform: rotate(-90deg);
transition: transform 0.2s ease;
}
/* 展开状态：箭头向下（恢复原始角度） */
.dropdown-toggle.show::after {
transform: rotate(0deg);
}? 注意：
rotate(-90deg)表示逆时针旋转 90°，视觉上即从“↓”变为“→”；若需顺时针旋转（效果相同），也可写为rotate(270deg)，但-90deg更直观。
? 完整可运行示例（含 HTML + CSS）
<!doctype html>
<html lang="en">
<head>
<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.2s ease;
}
.dropdown-toggle.show::after {
transform: rotate(0deg);
}
</style>
</head>
<body>
<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>
</body>
</html>⚠️ 注意事项与最佳实践
-
选择器优先级：确保你的自定义 CSS 在 Bootstrap CSS 之后加载（如内联
<style></style>放在<link>后），或使用足够强的选择器（如.navbar .dropdown-toggle::after）避免被覆盖。 -
过渡动画平滑性：建议保留
transition，否则旋转会突兀。0.2s ease是 Bootstrap 默认动画时长，保持一致性更佳。 -
无障碍兼容性：该方案不修改
aria-expanded属性或焦点逻辑，完全兼容屏幕阅读器——箭头方向仅是视觉增强，语义仍由aria-expanded控制。 -
不推荐修改
.caret类：Bootstrap 5 已弃用.caret类，所有下拉箭头均由::after统一管理，直接操作伪元素才是标准做法。
通过以上方法，你无需修改任何 JavaScript 或引入额外依赖，即可优雅地实现下拉箭头方向的动态切换，提升界面引导性与专业度。
