将Bootstrap Active导航丸选项卡的边框底部形状更改为下划线 [英] Change Bootstrap Active nav-pills tab border bottom shape to solid underline

问题描述

试图将nav-pills边框底部的Bootstrap Active选项卡更改为矩形.端点是弯曲的，无法将其更改为坚实的下划线.

Trying to change the Bootstrap Active Tab of nav-pills border bottom to rectangle. The end points are curved and unable to change it to be a solid underline.

请参阅此链接:Bootstrap Nav Pills-JSFiddle-我不知道如何在这里放置jsfiddle链接. anwyasys.下面是代码.请帮忙. 2.X以上版本的jquery使用.无法正确解决jsfiddle.net链接插入

Refer this Link: Bootstrap Nav Pills - JSFiddle - I dont know how to put jsfiddle link here. anwyasys. below is the code. kindly help out. jquery above 2.X version use. Unable to resolve the jsfiddle.net link insertion properly

 $(document).ready(function () {console.log("highlight.js file executed...");
     $('ul.nav > li > a').click(function (e) { e.preventDefault(); $('.initial-active').removeClass('initial-active');
         $('ul.nav > li > a').removeClass('active');
         $(this).addClass('active'); 
    });
 });

<h2 class="text-center">Bootstrap Navpills </h2><br /><ul class="nav nav-pills text-center nav-justified ulthis"> 
    <li class="initial-active" role="apisolution">
        <a data-toggle="pill" href="#pricequoteapi">
            <img alt="Price Quote API" src="http://browseideas.com/wp-content/uploads/2012/02/random-mood-photography-20-575x378.png" width="70" height="81" /> <br /> 
            <div>PQ</div> 
        </a> 
    </li> 
    <li role="apisolution"> 
        <a data-toggle="pill" href="#claimadjustapi">
            <img alt="Claim Adjust API" src="https://img00.deviantart.net/08d8/i/2011/040/4/7/random_photography____by_doineedtoknow-d396v4j.jpg" width="70" height="81" /> <br /> 
            <div>CA</div>
        </a> 
    </li> 
    <li role="apisolution"> 
        <a data-toggle="pill" href="#druglistapi">
            <img alt="Drug List API" src="http://www.samhorine.com/imagesrandom/random8.jpg" width="70" height="81" /> <br /> 
            <div>DL</div> 
        </a> 
    </li> 
    <li role="apisolution"> 
         <a data-toggle="pill" href="#medpricingapi">
             <img alt="Med Pricing API" src="https://c1.staticflickr.com/4/3864/14258413420_5717547046_z.jpg" width="70" height="81" /> <br />
        <div>MP</div>
        </a> 
    </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade in active" id="pricequoteapi"> 
    <div> 
     <h3>PQ</h3>  
       <p>PQ section.</p> 
    </div>
   </div>
     <div class="tab-pane fade" id="claimadjustapi"> 
         <div> <h3>CA</h3> 
              <p>CA section</p> 
        </div> 
    </div> 
  <div class="tab-pane fade" id="druglistapi"> <div> <h3>DL</h3> 
    <p>DL section</p> </div> </div> <div class="tab-pane fade" id="medpricingapi"> <div> 
      <h3>MP</h3> <p>MP section</p> </div> </div></div>
    .nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{ color:black; background-color:white;}.initial-active{ border-bottom: 10px solid #5bc0eb;}.nav > li > a.active { border-bottom: 10px solid #5bc0eb;}.ulthis { border-bottom: 2px solid #FF5FFF;}

图像:预期的一个-主动Nav药丸"选项卡下划线有实线

Images: Expected One - Active Nav Pills tab being solid underlined

这是我要解决的问题.观察主动导航药丸的圆形边缘.想要将其更改为类似于

This is the one I am trying to resolve. Observe the rounder edges of the active nav pill. Want to change it to like Expected One above

请参考上面的JSFiddle链接中的代码.请帮忙.谢谢！

Please refer the code in the JSFiddle link above. Kindly help out. Thanks!

推荐答案

尝试一下:

.nav > li > a.active { border-bottom: 10px solid #5bc0eb; border-radius: none}

看起来它可能已预定义了边框半径，并将其重置为0半径.

Looks like it might have a border-radius predefined, with this it gets reset to 0 radius.

这篇关于将Bootstrap Active导航丸选项卡的边框底部形状更改为下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！