我用 Bootstrap 4 藥丸創(chuàng)建了一個布局。第一次點擊時工作正常，第二次點擊時就不起作用。假設(shè)如果我們依次單擊 menu1、menu2、menu3 - 選項卡內(nèi)容正在加載，而如果我再次單擊 menu1 - 選項卡內(nèi)容沒有更改。我犯了一些錯誤，但我對實現(xiàn)這個場景有點困惑。我想要如下所示的設(shè)計。誰能糾正我的錯誤，這對我有很大幫助。預(yù)先感謝，下面是我的片段，請在完整窗口中查看我的結(jié)果以檢查我的布局設(shè)計<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>
1 回答
有只小跳蛙
TA貢獻1824條經(jīng)驗 獲得超8個贊
.nav-item上面的包裝器結(jié)構(gòu).nav-link僅適用于導(dǎo)航托管在<ul>.?如果導(dǎo)航是使用自定義結(jié)構(gòu)創(chuàng)建的，則選項卡/導(dǎo)航/藥丸需要是.nav父級的直接子級。
在您的場景中，您要么必須使用重新實現(xiàn)它，要么需要刪除您及其內(nèi)部元素<ul>之間的 div?。.nav.nav-link
你還有一個錯字——nav-lin應(yīng)該是nav-link。實際上，這不會影響您的布局，因為您已經(jīng).btn向相同的元素添加了類。
這是您的代碼，其中包含固定的拼寫錯誤并刪除了導(dǎo)航元素內(nèi)的包裝器 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>
- 1 回答
- 0 關(guān)注
- 183 瀏覽
添加回答
舉報
0/150
提交
取消