Bootstrap标签式导航与拆分下拉按钮兼容问题

看起来你碰到了Bootstrap版本差异导致的组件冲突问题——你的标签导航是Bootstrap 3.x的写法，而拆分下拉按钮里的dropdown-toggle-split是Bootstrap 4及以上版本才新增的类，3.3.7根本不认识这个类，所以会失效。下面给你两种可行的解决方案：

方案一：统一升级到Bootstrap 4+，适配标签导航 #

如果想保留拆分下拉按钮的原生效果，建议升级到Bootstrap 4或5，同时把标签导航的代码改成对应版本的写法：

<!-- Bootstrap 4+ 版本的标签导航 -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>
<div class="tab-content">
  <div id="home" class="tab-pane fade show active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

你的拆分下拉按钮代码可以直接保留，因为这是Bootstrap 4+的标准写法，升级后就能正常工作。注意同时要替换对应的CSS和JS文件到4+版本哦。

方案二：继续使用Bootstrap 3.3.7，模拟拆分下拉按钮效果 #

如果不想升级版本，那需要去掉dropdown-toggle-split类，用Bootstrap 3的方式实现类似的拆分按钮效果：

<!-- Bootstrap 3.3.7 版本的模拟拆分下拉按钮 -->
<li class="nav-item">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">{{ session.username }}</button>
    <!-- 用普通的dropdown-toggle替代split类，调整样式模拟拆分效果 -->
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="/get_messages">Messages</a></li>
      <li><a href="/get_friend_requests">Friend Requests</a></li>
      <li class="divider"></li>
      <li><a href="/logout">Log Out</a></li>
    </ul>
  </div>
</li>

这里需要注意几个细节：

• Bootstrap 3里下拉菜单默认用<ul>结构，而非<div>
• 用caret图标作为下拉指示器，替代原本的空span
• 分隔线用divider类，而非Bootstrap 4+的dropdown-divider

这样调整后，在Bootstrap 3.3.7里，标签导航和模拟的拆分下拉按钮都能正常工作。

总结一下，核心问题就是两个组件来自不同Bootstrap版本，只要统一版本或者适配对应版本的写法就能解决啦~

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