Bootstrap navbar活動項目顯示border-bottom喜歡博客示例

Question

我想改變活動項目：li活動項目之後，如博客示例（http://getbootstrap.com/examples/blog/），但在我的情況下，我需要底部欄而不是三角形。

的例子做到這一點： .nav

.navbar-nav .active:after { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    width: 0; 
    height: 0; 
    margin-left: -5px; 
    vertical-align: middle; 
    content: " "; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid; 
    border-left: 5px solid transparent; 
} 

一切我走到這一步是：

.blog-nav .active:after { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    width: 0; 
    height: 0; 
    margin-left: -5px; 
    vertical-align: middle; 
    content: " "; 
    border-right: 10px solid; 
    border-bottom: 5px solid; 
    border-left: 10px solid; 
} 

的問題是，它不適合鏈接文本。

如何更改此代碼，使其看起來像一個矩形，它適合鏈接下的單詞而不是三角形？

Answer 1

.navbar-nav .active:after { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    width: 10px; 
    height: 5px; 
    margin-left: -5px; 
    vertical-align: middle; 
    content: " "; 
} 

如果你想修改多大的矩形，只需修改高度和寬度，請你