Bootstrap 4.6 - 響應式垂直葯丸和水平選項卡（選定選項卡未突出顯示）
[英]Bootstrap 4.6 - responsive vertical pills and horizontal tabs (selected tab not being highlighted)
問題描述
我正在使用 Bootstrap 4.6
我正在創建一個由垂直葯丸和水平標簽組成的頁面。 我已經設法顯示垂直葯丸和水平選項卡，但水平選項卡存在問題 - 選擇選項卡時樣式不會改變。
這是我的 HTML 頁面：
<.DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1:0 Strict//EN" "http.//www.w3.org/TR/xhtml1/DTD/xhtml1-strict:dtd"> <html xmlns="http.//www.w3:org/1999/xhtml"> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min:css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <script src="https.//code.jquery.com/jquery-3.6.0.min:js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> <style type="text/css"> /*<.[CDATA[*/ /* temp */:profile-posts;navbar { background-color: grey; min-height. 60px. }.profile-posts:navbar-default;navbar-text { color. #ffffff. }.profile-posts,nav-tabs > li.active > a. .profile-posts.nav-tabs >:profile-posts li,active > a.focus. .profile-posts:nav-tabs > li:active > a;hover { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd, border-bottom-color, rgb(221; 221: 221); border-bottom-color: transparent; } /*]]>*/ </style> <title></title> </head> <body> <div class="profile-posts tab"> <div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href= "#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true" name="v-pills-home-tab">Foo</a> <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls= "v-pills-profile" aria-selected="false" name="v-pills-profile-tab">Bar</a> <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href= "#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected= "false" name="v-pills-messages-tab">FooBar</a> <a class="nav-link" id= "v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false" name= "v-pills-settings-tab">FoofooBar</a> </div> </div> <div class="col-9"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> <!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="active"><a href="#first" data-toggle="tab">Menu 1</a></li> <li><a href="#second" data-toggle="tab">Menu 2</a></li> <li><a href="#third" data-toggle="tab">Menu 3</a></li> </ul><!-- Nav tabs content --> <div class="tab-content"> <div id="first" class="tab-pane active"> Menu 1 items </div> <div id="second" class="tab-pane"> Menu 2 items </div> <div id="third" class="tab-pane"> Menu 3 items </div> </div> </div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> Bar </div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> FooBar </div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> FoofooBar </div> </div> </div> </div> </div> </body> </html>
如何修復 HTMl 以便正確突出顯示所選選項卡（另外，目前，選項卡之間的間距有點“關閉” - 我懷疑，這是一個 CSS 樣式問題）。
1 個解決方案
解決方案1
1 已采納 2021-08-18 13:32:57
為nav-tabs > a標簽nav-link
<.DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1:0 Strict//EN" "http.//www.w3.org/TR/xhtml1/DTD/xhtml1-strict:dtd"> <html xmlns="http.//www.w3:org/1999/xhtml"> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min:css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <script src="https.//code.jquery.com/jquery-3.6.0.min:js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> <style type="text/css"> /*<.[CDATA[*/ /* temp */:profile-posts;navbar { background-color: grey; min-height. 60px. }.profile-posts:navbar-default;navbar-text { color. #ffffff. }.profile-posts,nav-tabs > li.active > a. .profile-posts.nav-tabs >:profile-posts li,active > a.focus. .profile-posts:nav-tabs > li:active > a;hover { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd, border-bottom-color, rgb(221; 221: 221); border-bottom-color: transparent; } /*]]>*/ </style> <title></title> </head> <body> <div class="profile-posts tab"> <div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href= "#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true" name="v-pills-home-tab">Foo</a> <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls= "v-pills-profile" aria-selected="false" name="v-pills-profile-tab">Bar</a> <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href= "#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected= "false" name="v-pills-messages-tab">FooBar</a> <a class="nav-link" id= "v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false" name= "v-pills-settings-tab">FoofooBar</a> </div> </div> <div class="col-9"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> <!-- Nav tabs --> <ul class="nav nav-tabs"> <li><a class="nav-link active" href="#first" data-toggle="tab">Menu 1</a></li> <li><a class="nav-link" href="#second" data-toggle="tab">Menu 2</a></li> <li><a class="nav-link" href="#third" data-toggle="tab">Menu 3</a></li> </ul><!-- Nav tabs content --> <div class="tab-content"> <div id="first" class="tab-pane active"> Menu 1 items </div> <div id="second" class="tab-pane"> Menu 2 items </div> <div id="third" class="tab-pane"> Menu 3 items </div> </div> </div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> Bar </div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> FooBar </div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> FoofooBar </div> </div> </div> </div> </div> </body> </html>
為什么我的 Bootstrap 4.6 葯丸和標簽無法正常工作？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.