如何设置引导选项卡的高度和边框？ [英] How to set height and border of bootstrap tabs?

问题描述

我已在该模式中创建了模态和导航标签。 2个问题。

I have created a modal and a nav-tab in that modal .There are 2 issues.

• 首先是这些标签的高度非常大，我想将它们的高度设置得小一些。尝试使用css height属性设置它们的高度，但它不适合我。

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

我的第二个问题是，

所以，任何人都可以帮助我解决上述问题。

这是我的模态与标签的形象：

So, please can anyone help me to solve the above issues.
Here is the image of my modal with the tabs:

这里是我的 / strong>这些标签（我避免不必要的代码）：

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

这篇关于如何设置引导选项卡的高度和边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！