Jquery 如何设置引导选项卡的高度和边框?

Jquery 如何设置引导选项卡的高度和边框?,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我已在该模式中创建了一个模式和导航选项卡。共有两个问题 首先,这些标签的高度非常大,我想把它们的高度设置得小一点。我曾尝试使用css height属性设置它们的高度,但对我来说不起作用 我的第二个问题是,当打开某个选项卡时,该选项卡底部显示的边框底线/行不会像正常情况下那样被隐藏。我想在该选项卡打开时隐藏该选项卡的底线 那么,有谁能帮我解决上述问题。 以下是带有选项卡的my modal的图像: 以下是这些选项卡的代码(我避免了不必要的代码): 对于第一期使用高度:43px 第

我已在该模式中创建了一个模式和导航选项卡。共有两个问题

  • 首先,这些标签的高度非常大,我想把它们的高度设置得小一点。我曾尝试使用css height属性设置它们的高度,但对我来说不起作用

  • 我的第二个问题是,当打开某个选项卡时,该选项卡底部显示的边框底线/行不会像正常情况下那样被隐藏。我想在该选项卡打开时隐藏该选项卡的底线

那么,有谁能帮我解决上述问题。
以下是带有选项卡的my modal的图像:

以下是这些选项卡的代码(我避免了不必要的代码):



对于
第一期
使用
高度:43px

第二步,您必须设置
边框底部:无

CSS

li{
    position:absolute;
    margin-left:0px;
    height:43px;
}
li.active{
    border-bottom:none;
}
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-->

我正在做一个@Rohan Kumar的演示

只需更改css:您需要执行以下操作

第一个问题:您需要将border bottom设置为下面的内容背景,就像您使用的是完整边框一样

li.active {
    border-bottom:1px solid white;
}
第二个问题:您可以通过定义高度来执行@Rohan Kumar的操作,也可以根据需要将边距和填充设置为0,增加顶部和底部的填充值


分享我的解决方案,以防其他人不得不调整高度:

.nav-tabs > li > a
{
    /* adjust padding for height*/
    padding-top: 4px; 
    padding-bottom: 4px;
}
第二个问题可以通过调整主动锚的边缘来解决

.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;    
}

修改你的代码。这样做会更容易更正。提供css会更好
.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;    
}