将Bootstrap Active nav-pills标签边框底部形状更改为实线下划线

尝试将nav-pills边框底部的Bootstrap Active Tab更改为矩形。 端点是弯曲的，无法将其更改为实心下划线。

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

$(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'); }); }); 
Bootstrap Navpills 

 
   
 
PQ
  
 
   
 
CA
  
 
   
 
DL
  
 
   
 
MP
  
 
 
 
 
 
PQ
 
PQ section.
 
 
 
 
 
CA
 
CA section
 
 
 
 
 
DL
 
DL section
 
 
 
 
 
MP
 
MP section
 
 
 .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;} 

图像：预期的一个 – 活动导航丸标签为实心下划线

这是我试图解决的问题。 观察活动导航丸的圆形边缘。 想要将其更改为上面的预期一个

请参阅上面JSFiddle链接中的代码。 请帮忙。 谢谢！

Answer 1

试试这个：

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

看起来它可能有一个预定义的border-radius，用它重置为0半径。