【发布时间】：2021-10-19 08:26:20
【问题描述】：
我正在使用 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 样式问题）。
【问题讨论】：
标签： html css twitter-bootstrap bootstrap-4