Question

我希望更改活动：在活动项目之后，如博客示例（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: " ";
}

如果您想修改矩形的大小，只需根据需要修改高度和宽度

Bootstrap导航栏活动项目显示边框底部像博客示例

1 个答案: