我在该模态中创建了一个模态和一个导航选项卡。有2 个问题。
首先是那些选项卡的高度非常大,我想将它们的高度设置得小一点。我尝试使用 css height 属性设置它们的高度,但它对我不起作用。
我的第二个问题是,当打开特定选项卡时,显示在该选项卡底部的 border-bottom/line 没有被隐藏,因为它应该正常执行。我想隐藏该选项卡的底线选项卡打开时。
所以,请任何人帮助我解决上述问题。
这是带有选项卡的模态图像:
这是我为这些选项卡编写的代码(我避免了不必要的代码):
<div class="tabbable" >
<ul class="nav nav-tabs" ><!--tabs-->
<li style="position:absolute;margin-left:0px;height:50px;" id="logintab">
<a href="#pane_login" data-toggle="tab" id="logintab_a">Login</a></li>
<li class="active" style="margin-left:70px;" id="reg_tab" >
<a href="#pane_reg" data-toggle="tab" id="regtab_a">Registration</a></li>
</ul>
<div class="tab-content"><!--login tab content-->
<div id="pane_login" class="tab-pane active">
</div>
</div>
<div class="tab-content"><!--login tab content-->
<div id="pane_register" class="tab-pane active">
</div>
</div>
</div><!--/Tabbable-->
最佳答案
分享我的解决方案以防其他人必须调整高度:
.nav-tabs > li > a
{
/* adjust padding for height*/
padding-top: 4px;
padding-bottom: 4px;
}
第二个问题可以通过调整事件 anchor 的边距来解决
.nav-tabs > li.active > a:focus, .nav-tabs > li.active > a
{
margin-top: 1px;
}
.nav-tabs > li {
margin-bottom: 0px;
}
.nav-tabs > li.active {
margin-bottom: -1px;
}
关于jquery - 如何设置 Bootstrap 选项卡的高度和边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19698925/