引导选项卡药片无法按相反顺序工作

Question

我用 Bootstrap 4 药丸创建了一个布局。第一次点击时工作正常，第二次点击时就不起作用。假设如果我们依次单击 menu1、menu2、menu3 - 选项卡内容正在加载，而如果我再次单击 menu1 - 选项卡内容没有更改。我犯了一些错误，但我对实现这个场景有点困惑。我想要如下所示的设计。谁能纠正我的错误，这对我有很大帮助。预先感谢，下面是我的片段，请在完整窗口中查看我的结果以检查我的布局设计<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>          </div>        </div>        </div>      </div>  

Answer 1

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

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

你还有一个错字——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>