【发布时间】：2020-10-08 19:06:12
【问题描述】：
我使用 bootstrap 为我的网站制作了一些垂直标签。
我希望标签标题下方的一些文本仅在标签处于活动状态时出现。
我做到了，唯一的问题是，当我从例如选项卡 1 更改为选项卡 3 时，页面内容被拉起。
有没有一种方法可以在不上拉页面的情况下实现这一点？
例如：https://jsfiddle.net/hm7n5bv4/
.filler {
background: cyan;
height: 600px;
}
.nav-pills .nav-link .tab_subtitle_hide {
font-size: 16px !important;
visibility: hidden;
height: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-pills .nav-link.active .tab_subtitle_hide {
color: #fff;
visibility: visible;
height: auto;
opacity: 1;
transition: opacity 0.3s ease;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="filler">Hello world</div>
</div>
<div class="row">
<div class="col-3 nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-for-teams-tab" data-toggle="pill" href="#v-pills-for-teams"
role="tab" aria-controls="v-pills-for-teams" aria-selected="false"><i
class="tab_i fad fa-users-class"></i>
<div class="tab_content">For Teams
</div>
<div class="tab_subtitle_hide">Similar to a hierarchical organization, Dummy text allows you to
structure
users.</div>
</a>
<a class="nav-link" id="v-pills-for-small-business-tab" data-toggle="pill"
href="#v-pills-for-small-business" role="tab" aria-controls="v-pills-for-small-business"
aria-selected="false"><i class="tab_i fad fa-store"></i>
<div class="tab_content">For small business
</div>
<div class="tab_subtitle_hide">Similar to a hierarchical organization, Dummy text allows you to
structure
users.</div>
</a>
<a class="nav-link" id="v-pills-for-enterprise-tab" data-toggle="pill" href="#v-pills-for-enterprise"
role="tab" aria-controls="v-pills-for-enterprise" aria-selected="true">
<div class="tab_content"><i class="tab_i fad fa-building"></i><span class="multi-company">For
enterprise</span><br></div>
<div class="tab_subtitle_hide">Similar to a hierarchical organization, Dummy text allows you to
structure
users.</div>
</a>
</div>
<div class="col-9 tab-content" id="v-pills-tabContent">
<div class="tab-pane active show" id="v-pills-for-teams" role="tabpanel"
aria-labelledby="v-pills-for-teams-tab">
<!--Inicio sub-tab1-->..0
<!--Fim sub-tab1-->
</div>
<div class="tab-pane" id="v-pills-for-small-business" role="tabpanel"
aria-labelledby="v-pills-for-small-business-tab">
<!--Inicio sub-tab2-->..1
<!--Fim sub-tab2-->
</div>
<div class="tab-pane" id="v-pills-for-enterprise" role="tabpanel"
aria-labelledby="v-pills-for-enterprise-tab">
<!--Inicio sub-tab3-->..2
<!--Fim sub-tab3-->
</div>
</div>
</div>【问题讨论】：
-
我不明白您所说的“拉起页面”是什么意思。我所看到的只是有一个水平滚动条，因为您没有用行包裹的容器（'.container-fluid'）。 jsfiddle.net/davidliang2008/Ljw07ue1/3
-
首先感谢您的回复，我会尽量解释清楚。要体验我所说的内容，请使用第一个选项卡滚动到页面末尾，然后选择最后一个选项卡，之后，您几乎可以再次选择最后一个选项卡prnt.sc/uvr6eeprnt.sc/uvr7mjprnt.sc/uvr6un
-
嗯你不能使用滚动条向下滚动？
-
嗯，我可以，只是想知道是否有办法避免这种情况，例如，如果用户在每个选项卡上单击多次。
标签： html css bootstrap-4 tabs