[英]How to set height and border of bootstrap tabs?
I have created a modal and a nav-tab in that modal .There are 2 issues . 我在该模态中创建了一个模态和一个导航选项卡。有两个问题 。
First is that those tabs are very large in height ,I want to set their height a bit less in size .I have tried to set their height using css height property,but its not working for me. 首先是那些标签的高度非常大,我想设置它们的高度稍微小一点。我试图用css height属性设置它们的高度,但它对我不起作用。
My second issue is that, when particular tab is opened then the border-bottom/ line showing at bottom of that tab is not getting hidden,as it should do normally.I want to hide that bottom line of the tab when it is open . 我的第二个问题是,当打开特定选项卡时,显示在该选项卡底部的边框底部/线不会被隐藏,因为它应该正常。我想在选项卡打开时隐藏该选项卡的底线。
So, please can anyone help me to solve the above issues. 所以,请任何人帮我解决上述问题。
Here is the image of my modal with the tabs: 这是我的模态的图像与标签:
here is my code for these tabs (i am avoiding unnecessary code): 这是我的这些选项卡的代码 (我避免不必要的代码):
<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-->
Sharing my solution just in case someone else has to adjust the height: 共享我的解决方案以防万一其他人必须调整高度:
.nav-tabs > li > a
{
/* adjust padding for height*/
padding-top: 4px;
padding-bottom: 4px;
}
The second issue could be resolved by adjusting margin of active 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;
}
For First issue
use height:43px
对于
First issue
使用height:43px
And for second you have to set border-bottom:none
like, 第二,你必须设置
border-bottom:none
like,
CSS CSS
li{
position:absolute;
margin-left:0px;
height:43px;
}
li.active{
border-bottom:none;
}
HTML HTML
<div class="tabbable" >
<ul class="nav nav-tabs" ><!--tabs-->
<li style="" id="logintab">
<a href="#pane_login" data-toggle="tab" id="logintab_a">Login</a></li>
<li class="active" 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-->
I'm taking a demo of @Rohan Kumar.
我正在拍摄@Rohan Kumar的演示。
Just changes of css: you need to do as the following 只需更改css:您需要执行以下操作
First Issue: you need to set border-bottom as the below contents background as if you are using full border 第一个问题:您需要将border-bottom设置为以下内容背景,就像使用全边框一样
li.active {
border-bottom:1px solid white;
}
Second Issue: you can do as @Rohan Kumar by defining the height or you can set margin and padding to 0 if needed increase the padding value for top and bottom. 第二个问题:你可以通过定义高度来做@Rohan Kumar,或者你可以设置边距和填充为0,如果需要增加顶部和底部的填充值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.