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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 00:26:46  来源:igfitidea点击:

How to set height and border of bootstrap tabs?

jqueryhtmlcsstwitter-bootstrap

提问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: enter image description here

所以,请任何人都可以帮助我解决上述问题。
这是带有选项卡的模态图像: 在此处输入图片说明

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 issueuse height:43px

First issue使用height:43px

And for second you have to set border-bottom:nonelike,

其次,你必须设置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-->

Demo

演示

回答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,增加顶部和底部的填充值。

demo

演示