nav-pills nav-stacked不生效：垂直菜单仍显示为水平的问题求助

我猜你大概率是碰到了Bootstrap版本差异的坑，或者HTML结构/类名使用有误——毕竟nav-stacked配合nav-pills确实能实现垂直菜单，只是不同版本的写法有变化，咱们一步步来排查解决：

1. 先确认你的Bootstrap版本 #

如果是Bootstrap 3 #

这时候nav-stacked是官方支持的类，你需要确保HTML结构完全正确，避免冲突类干扰：

<!-- Bootstrap 3 正确的垂直菜单结构 -->
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">项目</a></li>
  <li><a href="#">文档</a></li>
  <li><a href="#">关于</a></li>
</ul>

排查要点：

• 别把nav-stacked加到li标签上，必须放在最外层的nav容器类里
• 检查有没有额外添加nav-justified这类强制水平布局的类
• 确认没有自定义CSS把.nav-stacked > li的display改成inline-block，这会破坏垂直布局

如果是Bootstrap 4/5 #

划重点：Bootstrap 4之后已经废弃了nav-stacked类，官方换成flex-column实现垂直导航。但你说必须用nav-stacked的方式，咱们可以用自定义CSS让这个类重新生效，完全不影响页面其他部分：

先写基础结构（注意Bootstrap 4+需要加nav-item和nav-link类）：

<ul class="nav nav-pills nav-stacked">
  <li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
  <li class="nav-item"><a class="nav-link" href="#">项目</a></li>
  <li class="nav-item"><a class="nav-link" href="#">文档</a></li>
  <li class="nav-item"><a class="nav-link" href="#">关于</a></li>
</ul>

然后添加一段自定义CSS，让nav-stacked实现垂直布局：

.nav-stacked {
  flex-direction: column;
}
/* 如果需要菜单项占满容器宽度，可以追加这个 */
.nav-stacked .nav-link {
  width: 100%;
}

这样既保留了你想用的nav-stacked类名，又能在新版本Bootstrap里正常生效，还不用降级框架。

2. 额外排查点 #

• 检查父元素有没有设置display: flex且flex-direction: row，这种情况会覆盖子导航的垂直布局，给导航容器加flex-column（或用上面的自定义CSS）就能强制垂直
• 确认引入的Bootstrap CSS文件没有版本冲突，比如同时引入3和5的文件会导致样式混乱

内容的提问来源于stack exchange，提问作者M.K