如何设置引导标签的高度和边框？

Question

我在该模态中创建了一个模态和一个导航选项卡.有两个问题.

• 首先是那些标签的高度非常大,我想设置它们的高度稍微小一点.我试图用css height属性设置它们的高度,但它对我不起作用.

• 我的第二个问题是,当打开特定选项卡时,显示在该选项卡底部的边框底部/线不会被隐藏,因为它应该正常.我想在选项卡打开时隐藏该选项卡的底线.

所以,请任何人帮我解决上述问题.
这是我的模态的图像与标签:

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

<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-->

Answer 1

共享我的解决方案以防万一其他人必须调整高度:

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

Answer 2

用来First issue​height:43px

其次，你必须设置border-bottom:none如下：

CSS

li{
    position:absolute;
    margin-left:0px;
    height:43px;
}
li.active{
    border-bottom:none;
}

超文本标记语言

<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-->

演示