【发布时间】：2020-12-10 21:58:38
【问题描述】：
我正在尝试为我的网站制作具有自定义样式的垂直对齐引导药丸。
但是无论如何，当药丸一旦激活（通过单击它）它不会通过单击下一个选项卡来停用，因此，我无法正确更改我的选项卡。
第 3 到第 6 粒药没有任何作用。
演示
.h-bstfecture-ul{
list-style: none;
}
.h-bstfecture-ul li{
padding-top: 30px;
padding-bottom: 30PX;
padding-right: 45PX;
padding-left: 20PX;
border-top: 1px solid #E5E5E5;
border-right: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
.h-bstfecture-ul li a{
text-decoration: none;
color: #222222;
font-size: 12px;
margin-top: 4px;
}
.h-bstfecture-ul li img{
max-height: 26px;
max-width: 26px;
/*fill: #222222;
filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);*/
}
.h-bstfecture-ul li:hover a{
color: #FFC000;
}
.bestservice-pillstitle{
color: #222222;
font-size: 28px;
font-weight: 600;
}
.bestservice-pills-paragraph{
color: #777777;
font-size: 14px;
}
.bestservice-pillscontent ul{
list-style: none;
}
.bestservice-pillscontent ul li{
border: 1px solid #E5E5E5;
margin-top: 15px;
margin-bottom: 15px;
padding-left: 10px;
padding-top: 7px;
padding-bottom: 7px;
color: #777777;
font-size: 14px;
}
.ylw-tik{
width: 12px;
}
.our-service-title{
color: #222222;
font-size: 24px;
font-weight: 600;
}
.our-service-title:before, .our-service-title:after{
content:" ";
display: inline-block;
vertical-align: middle;
margin-left: 10px;
margin-right: 10px;
width: 30px;
height: 4px;
background-color: #FFC000;
}
.our-service-subtitle{
color: #777777;
font-size: 14px;
max-width: 650px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<div class="content-fluid">
<div class="row d-flex justify-content-center m-0 mb-5">
<div class="our-service-head">
<p class="our-service-title text-center">Our Best Features</p>
<p class="our-service-subtitle text-center px-3">
Nulla ullamcorper bibendum orci, ac tempor nisl lacinia quis.
</p>
</div>
</div>
<div class="row m-0 d-flex justify-content-center">
<div class="bestservice-pills col-xl-2 mx-3 p-0">
<ul class="h-bstfecture-ul m-0 p-0 nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<li class="row m-0 nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
<div style="width: 35px;"><img src="icons/our-best-feacture-1.svg"></div>
<a href="#" class="ml-2">Efficient Inspection</a>
</li>
<li class="row m-0 nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
<div style="width: 35px;"><img src="icons/our-best-feacture-2.svg"></div>
<a href="#" class="ml-2">Employee Safety</a>
</li>
<li class="row m-0 nav-link" id="3rd-tab" data-toggle="pill" href="#3rd" role="tab" aria-controls="3rd" aria-selected="false">
<div style="width: 35px;"><img src="icons/our-best-feacture-3.svg"></div>
<a href="#" class="ml-2">Industrial Automation</a>
</li>
<li class="row m-0 nav-link" id="4th-tab" data-toggle="pill" href="#4th" role="tab" aria-controls="4th" aria-selected="false">
<div style="width: 35px;"><img src="icons/our-best-feacture-4.svg"></div>
<a href="#" class="ml-2">Employee Feedback</a>
</li>
<li class="row m-0 nav-link" id="5th-tab" data-toggle="pill" href="#5th" role="tab" aria-controls="5th" aria-selected="false">
<div style="width: 35px;"><img src="icons/our-best-feacture-5.svg"></div>
<a href="#" class="ml-2">Live Data Monitoring</a>
</li>
<li class="row m-0 nav-link" id="6th-tab" data-toggle="pill" href="#6th" role="tab" aria-controls="6th" aria-selected="false">
<div style="width: 35px;"><img src="icons/our-best-feacture-6.svg"></div>
<a href="#" class="ml-2">Technological Support</a>
</li>
</ul>
</div>
<div class="col-xl-5 border border-primary mx-1 p-0 tab-content" id="v-pills-tabContent">
<!-- 1st pill -->
<div class="bestservice-pillscontent tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<p>1st</p>
</div>
<div class="bestservice-pillscontent tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<p>2nd</p>
</div>
<div class="bestservice-pillscontent tab-pane fade" id="3rd" role="tabpanel" aria-labelledby="3rd-tab">
<p>3rd</p>
</div>
<div class="bestservice-pillscontent tab-pane fade" id="4th" role="tabpanel" aria-labelledby="4th-tab">
<p>4th</p>
</div>
<div class="bestservice-pillscontent tab-pane fade" id="5th" role="tabpanel" aria-labelledby="5th-tab">
<p>5th</p>
</div>
<div class="bestservice-pillscontent tab-pane fade" id="6th" role="tabpanel" aria-labelledby="6th-tab">
<p>6th</p>
</div>
</div>
<div class="col-xl-3 border border-primary mx-1 p-0">
<div class="m-0">
<img src="images/best fecture-1.png">
</div>
</div>
</div>
</div>我该如何解决这个问题？
问题的文件链接- https://github.com/Kanchon-Gharami/problems-share-in-git.git
【问题讨论】：
标签： html css bootstrap-4