bootstrap tabs pills 不能以相反的顺序工作
bootstrap tabs pills not working on reverse order
我创建了一个包含 Bootstrap 4 个药丸的布局。它在第一次点击时工作正常，但在第二次点击时不起作用。假设如果我们在一个序列上单击 menu1、menu2、menu3 - 选项卡内容正在加载，如果我再次单击 menu1 - 选项卡内容没有改变。我犯了一些错误，但我对实现这种情况有点困惑。我想要如下所示的设计。
谁能指正我的错误，这对我帮助很大。提前致谢，下面是我的代码片段，请完整查看我的结果 window 以检查我的布局设计
<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>
documentation 中的示例表明 .nav-link 上方带有 .nav-item 包装器的结构仅适用于导航托管在 <ul> 上的情况。如果导航是使用自定义结构创建的，则 tabs/navs/pills 需要是 .nav 父级的直接子级。
在您的场景中，您要么必须使用 <ul> 重新实现它，要么需要删除 .nav 及其内部 .nav-link 元素之间的 div。
您还有一个错字 - nav-lin 应该是 nav-link。实际上，这不会影响您的布局，因为您已将 .btn class 添加到相同的元素。
这是您的代码，其中包含固定的拼写错误并已删除导航元素内的包装 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>
我创建了一个包含 Bootstrap 4 个药丸的布局。它在第一次点击时工作正常，但在第二次点击时不起作用。假设如果我们在一个序列上单击 menu1、menu2、menu3 - 选项卡内容正在加载，如果我再次单击 menu1 - 选项卡内容没有改变。我犯了一些错误，但我对实现这种情况有点困惑。我想要如下所示的设计。
谁能指正我的错误，这对我帮助很大。提前致谢，下面是我的代码片段，请完整查看我的结果 window 以检查我的布局设计
<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>
documentation 中的示例表明 .nav-link 上方带有 .nav-item 包装器的结构仅适用于导航托管在 <ul> 上的情况。如果导航是使用自定义结构创建的，则 tabs/navs/pills 需要是 .nav 父级的直接子级。
在您的场景中，您要么必须使用 <ul> 重新实现它，要么需要删除 .nav 及其内部 .nav-link 元素之间的 div。
您还有一个错字 - nav-lin 应该是 nav-link。实际上，这不会影响您的布局，因为您已将 .btn class 添加到相同的元素。
这是您的代码，其中包含固定的拼写错误并已删除导航元素内的包装 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>