Bootstrap 3迁移至Bootstrap 4后nav-item激活状态异常问题

我一眼就看出问题出在你的标签导航结构上——Bootstrap 4的nav-tabs组件对DOM层级有严格要求，你的写法破坏了它的原生交互逻辑。

问题根源 #

Bootstrap 4的标签页JS会默认监听直接挂载在.nav容器下的.nav-item元素，而你把每个带.nav-item类的<a>标签放在了额外的.col-sd-4（顺便纠正下：Bootstrap 4里没有col-sd这个类，应该是col-sm-4或者移动端适配的col-4）div容器里，这就导致JS无法正确识别兄弟项，切换时只能给当前点击的按钮加上active，却没法移除其他按钮的active类。

另外还有个小细节错误：你把.nav-item和.nav-link都加在了同一个<a>标签上，Bootstrap 4的标准结构应该是.nav-item作为父容器，里面嵌套带.nav-link的<a>标签。

修正方案 #

调整导航部分的DOM结构，把.nav-item直接作为.nav-tabs的子元素，再把列布局类加到.nav-item上，去掉多余的嵌套div；同时修正错误的列类名。

修正后的完整代码 #

<section id="memberships" class="memberships">
  <div class="container">
    <div class="row d-flex justify-content-center">
      <div class="col-lg-8 text-center">
        <h2 class="header-text">TEST</h2>
        <div class="memberships-mockup">
          <div id="nav-tabContent" class="tab-content">
            <div id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab" class="tab-pane fade show active">
              <p>1111111111</p>
            </div>
            <div id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab" class="tab-pane fade">
              <p>2222222222</p>
            </div>
            <div id="nav-third" role="tabpanel" aria-labelledby="nav-third-tab" class="tab-pane fade">
              <p>3333333333</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修正后的导航部分 -->
    <div id="myTab" role="tablist" class="nav nav-tabs">
      <div class="nav-item col-sm-4">
        <a id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-expanded="true" class="nav-link active">
          <span class="number">1</span>
        </a>
      </div>
      <div class="nav-item col-sm-4">
        <a id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" class="nav-link">
          <span class="number">2</span>
        </a>
      </div>
      <div class="nav-item col-sm-4">
        <a id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third" class="nav-link">
          <span class="number">3</span>
        </a>
      </div>
    </div>
  </div>
</section>

额外说明 #

• 不需要额外嵌套.row，因为.nav-tabs本身是flex布局，带col-sm-4类的.nav-item会自动均分宽度；
• 确认你已经正确引入了Bootstrap 4的依赖文件（jQuery、Popper.js和Bootstrap JS），原生标签页交互需要这些文件支持。

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