Bootstrap 4导航栏及子菜单箭头不显示问题求助

嘿，我之前也踩过这个坑！Bootstrap 4的导航栏下拉箭头是靠CSS伪元素实现的，没显示出来大概率是结构、样式引用或者自定义样式冲突的问题，咱们一步步排查：

1. 先检查菜单项结构是否符合Bootstrap 4规范 #

Bootstrap 4对下拉菜单的结构有严格要求，带子菜单的父项必须包含正确的类和属性，箭头才会被渲染出来。比如正确的一级下拉结构应该是这样的：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="parentMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    父菜单 <!-- 这里会自动显示向下的箭头 -->
  </a>
  <div class="dropdown-menu" aria-labelledby="parentMenu">
    <a class="dropdown-item" href="#">子项1</a>
    <!-- 嵌套子菜单的话，Bootstrap 4原生不支持，需要额外处理 -->
    <li class="dropdown-submenu">
      <a class="dropdown-item dropdown-toggle" href="#">嵌套子菜单</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">嵌套子项1</a>
      </div>
    </li>
  </div>
</li>

你需要确保：

• 父菜单项的<li>标签带有dropdown类
• 父菜单的<a>标签同时包含nav-link和dropdown-toggle类，并且加上data-toggle="dropdown"属性

2. 确认Bootstrap 4的CSS是否正确加载 #

箭头是通过.dropdown-toggle::after这个伪元素生成的，如果没加载Bootstrap的核心CSS，这个伪元素就不会生效。你可以打开浏览器开发者工具（F12），查看页面的<head>部分，确认Bootstrap 4的CSS链接没有路径错误，或者直接用官方CDN链接：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

另外要注意，别把Bootstrap 4和5的样式混着用，版本不兼容也会导致样式失效。

3. 检查是否有自定义CSS覆盖了箭头样式 #

有时候我们自己写的CSS会不小心覆盖Bootstrap的默认样式，比如设置了.dropdown-toggle::after { display: none; }或者清空了content属性，箭头就会消失。你可以用开发者工具选中带下拉的链接元素，查看::after伪元素的样式，看看是不是被自定义样式覆盖了。

4. 嵌套子菜单（二级下拉）的箭头需要自定义CSS #

Bootstrap 4原生只支持一级下拉菜单，二级嵌套的子菜单箭头不会自动显示，需要你自己添加CSS来实现：

/* 二级子菜单的箭头样式（向右） */
.dropdown-submenu .dropdown-toggle::after {
  border-top: .3em solid transparent;
  border-right: 0;
  border-bottom: .3em solid transparent;
  border-left: .3em solid;
  margin-left: .255em;
  vertical-align: middle;
}

/* 二级子菜单的定位 */
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  border-radius: .25rem;
}

加上这段CSS后，二级子菜单的箭头就会正常显示了。

你可以对照上面的几点检查你的代码，应该就能解决箭头不显示的问题啦！

内容的提问来源于stack exchange，提问作者MrMustafa