获取Bootstrap 4 Vertical药丸：与药丸对齐后

Question

因此，我有一些垂直药丸，该药丸具有：after类，可以在药丸的末端创建一个三角形，如下所示：

.nav-link.active :after {
    position: absolute;
    right: -20px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 21px 0 21px 20px;
    border-color: transparent transparent transparent #bbcfd8;
}

我遇到的问题是三角形不会与药丸本身对齐。我已经使用示例创建了一个Codepen：

https://codepen.io/anon/pen/XBjOKR

任何帮助将不胜感激。

Answer 1

以这种样式和位置添加top:0：相对；在导航链接上

.nav-link.active :after {
    position: absolute;
    top: 0;
    right: -20px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 21px 0 21px 20px;
    border-color: transparent transparent transparent #bbcfd8;
}
.nav-pills .nav-link {
    position: relative;
}

查看更新后的codepen