jQuery 如何设置引导标签的高度和边框?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19698925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set height and border of bootstrap tabs?
提问by sachin_ware
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.
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 .
首先是这些选项卡的高度非常大,我想将它们的高度设置得小一点。我尝试使用 css height 属性设置它们的高度,但它对我不起作用。
我的第二个问题是,当打开特定选项卡时,显示在该选项卡底部的边框底部/线没有被隐藏,因为它应该正常执行。我想在打开时隐藏选项卡的底线。
So, please can anyone help me to solve the above issues.
Here is the image of my modal with the tabs:
所以,请任何人都可以帮助我解决上述问题。
这是带有选项卡的模态图像:
here is my codefor 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-->
回答by csharp_beginner
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
第二个问题可以通过调整active anchor的margin来解决
.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;
}
回答by Rohan Kumar
For First issue
use height:43px
供First issue
使用height:43px
And for second you have to set border-bottom:none
like,
其次,你必须设置border-bottom:none
,
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-->
回答by Bhojendra Rauniyar
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,增加顶部和底部的填充值。