ブートストラップタブのボーダートップをカスタマイズできません - 絶対位置で100％の幅を持つ空白があります

Question

ブートストラップのタブborder-top - 行の後の絶対位置が100％の空白があります。 http://jsfiddle.net/Vimpil/0mmv73oh/

li.active:after { 
    position: absolute; 
    width: 97%; 
    padding: 1px; 
    top: -1px; 
    content: ''; 
    background: #000; 
    height: 4px; 
} 

Answer 1

この余分なスペースがあるため、ブートストラップのデフォルトのスタイル内のリンクに適用されるmargin-rightです。

これを修正するには、スタイルをオーバーライドするか、widthを削除し、left: 0とright: 2pxを使用して線を引きます。

jQuery(function() { 
 
    jQuery('#myTab a:last').tab('show') 
 
})

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); 
 

 
li.active:after { 
 
    position: absolute; 
 
    padding: 1px; 
 
    top: -1px; 
 
    content: ''; 
 
    background: #000; 
 
    height: 4px; 
 
    right: 2px; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<ul class="nav nav-tabs" id="myTab"> 
 
    <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li> 
 
    <li><a data-target="#profile" data-toggle="tab">Profile</a></li> 
 
    <li><a data-target="#messages" data-toggle="tab">Messages</a></li> 
 
    <li><a data-target="#settings" data-toggle="tab">Settings</a></li> 
 
</ul> 
 

 
<div class="tab-content"> 
 
    <div class="tab-pane active" id="home">Home</div> 
 
    <div class="tab-pane" id="profile">Profile</div> 
 
    <div class="tab-pane" id="messages">Message</div> 
 
    <div class="tab-pane" id="settings">Settings</div> 
 
</div>