引导选项卡药丸不能以相反的顺序工作

Question

我使用 Bootstrap 4 药片创建了一个布局。它在第一次单击时工作正常，第二次则无法正常工作。假设如果我们单击序列上的 menu1、menu2、menu3 - 正在加载选项卡内容，并且再次单击 menu1 - 选项卡内容没有改变。我犯了一些错误，但我对实现这种情况有点困惑。我想要如下所示的设计。

谁能纠正我的错误，这对我很有帮助。先谢谢了，下面是我的sn-p，请在全窗口查看我的结果以检查我的布局设计

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 mb-4">
        <div class="">
          <div class="nav nav-pills row">
            <div class="nav-item col-md-1">
              <a class="nav-lin active btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu1">Menu 1</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu2">Menu 2</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu3">Menu 3</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu4">Menu4 4</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu5">Menu 5</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu6">Menu 6</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu7">Menu 7</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu8">Menu 8</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu9">Menu 9</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu10">Menu 10</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu11">Menu 11</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu12">Menu 12</a>
            </div>
          </div>
        </div>  
      </div>  
    </div>  
    <div class="row">
      <div class="col-md-1">
        <div class="nav nav-pills">
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu13">Menu 13</a>
              </div>
            </div>  
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu14">Menu 14</a>
              </div>
            </div>  
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu15">Menu 15</a>
              </div>
            </div>  
        </div>    
      </div>
      <div class="col-md-10">
        <div class="card">
          <div class="card-body">
            <div class="tab-content">
              <div class="tab-pane container active" id="menu1">1</div>
              <div class="tab-pane container fade" id="menu2">2</div>
              <div class="tab-pane container fade" id="menu3">3</div>
              <div class="tab-pane container fade" id="menu4">4</div>
              <div class="tab-pane container fade" id="menu5">5</div>
              <div class="tab-pane container fade" id="menu6">6</div>
              <div class="tab-pane container fade" id="menu7">7</div>
              <div class="tab-pane container fade" id="menu8">8</div>
              <div class="tab-pane container fade" id="menu9">9</div>
              <div class="tab-pane container fade" id="menu10">10</div>
              <div class="tab-pane container fade" id="menu11">11</div>
              <div class="tab-pane container fade" id="menu12">12</div>
              <div class="tab-pane container fade" id="menu13">13</div>
              <div class="tab-pane container fade" id="menu14">14</div>
              <div class="tab-pane container fade" id="menu15">15</div>
              <div class="tab-pane container fade" id="menu16">16</div>
              <div class="tab-pane container fade" id="menu17">17</div>
              <div class="tab-pane container fade" id="menu18">18</div>
            </div>
          </div>  
        </div>  
      </div>
      <div class="col-md-1">
        <div class="nav nav-pills">
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu16">Menu 16</a>
              </div>
            </div>  
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu17">Menu 17</a>
              </div>
            </div>  
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu18">Menu18</a>
              </div>
            </div>  
        </div> 
      </div>  
    </div>  
  </div>

Answer 1

documentation 中的示例表明，.nav-item 包装在 .nav-link 之上的结构仅适用于导航托管在 <ul> 上的情况。如果使用自定义结构创建导航，则选项卡/导航/药丸需要是 .nav 父级的直接子级。

在您的场景中，您要么必须使用 <ul> 重新实现它，要么需要删除 .nav 与其内部 .nav-link 元素之间的 div。

您还有一个错字 - nav-lin 应该是 nav-link。实际上，这不会影响您的布局，因为您已将 .btn 类添加到相同的元素中。

这是您的代码，其中包含固定的错字并在导航元素中删除了包装器 div：

    <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 mb-4">
        <div class="">
          <div class="nav nav-pills row">
            <a class="nav-link active btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu1">Menu 1</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu2">Menu 2</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu3">Menu 3</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu4">Menu4 4</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu5">Menu 5</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu6">Menu 6</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu7">Menu 7</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu8">Menu 8</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu9">Menu 9</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu10">Menu 10</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu11">Menu 11</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu12">Menu 12</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-1">
        <div class="nav nav-pills">
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu13">Menu 13</a>
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu14">Menu 14</a>
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu15">Menu 15</a>
        </div>
      </div>
      <div class="col-md-10">
        <div class="card">
          <div class="card-body">
            <div class="tab-content">
              <div class="tab-pane container active" id="menu1">1</div>
              <div class="tab-pane container fade" id="menu2">2</div>
              <div class="tab-pane container fade" id="menu3">3</div>
              <div class="tab-pane container fade" id="menu4">4</div>
              <div class="tab-pane container fade" id="menu5">5</div>
              <div class="tab-pane container fade" id="menu6">6</div>
              <div class="tab-pane container fade" id="menu7">7</div>
              <div class="tab-pane container fade" id="menu8">8</div>
              <div class="tab-pane container fade" id="menu9">9</div>
              <div class="tab-pane container fade" id="menu10">10</div>
              <div class="tab-pane container fade" id="menu11">11</div>
              <div class="tab-pane container fade" id="menu12">12</div>
              <div class="tab-pane container fade" id="menu13">13</div>
              <div class="tab-pane container fade" id="menu14">14</div>
              <div class="tab-pane container fade" id="menu15">15</div>
              <div class="tab-pane container fade" id="menu16">16</div>
              <div class="tab-pane container fade" id="menu17">17</div>
              <div class="tab-pane container fade" id="menu18">18</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-1">
        <div class="nav nav-pills">
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu16">Menu 16</a>
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu17">Menu 17</a>
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu18">Menu18</a>
        </div>
      </div>
    </div>
  </div>