css - Bootstrap navbar active item 显示 border-bottom like blog example

Question

我想更改 li 事件元素的事件:之后，如博客示例 ( http://getbootstrap.com/examples/blog/ )，但在我的情况下，我需要底部栏而不是三 Angular 形。

这个例子是这样做的: 导航

.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;
}

问题是它不适合链接文本。

我怎样才能将此代码更改为适合链接下方的单词而不是三 Angular 形的矩形？

Answer 1

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

如果想修改矩形有多大，修改高和宽就可以了