css - 如何在 Drupal Bootstrap 7.x-2.2 中的菜单上添加活动标记

Question

我正在尝试在菜单上的“活动”元素上添加一个三角形。我添加了这个CSS：

.navbar .active::after {
content: "";
position: absolute;
bottom: -16px;
border-width: 0px 15px 15px;
border-style: solid;
border-color: #ffffff transparent;
display: block;
width: 0;
}

但是由于某种原因，根据附加的屏幕截图，我在活动元素上略微重叠了 2 个三角形。我不知道还有什么办法让它正确....请帮忙？

Answer 1

Drupal.org 上的 andregriffin 回答了我的问题“这可能是因为有两个嵌套元素，都具有 .active 类，例如 li 和 a 标签。您需要更具体地说明您将 CSS 应用到哪一个。您可能应该使用 .navbar > .active:after 或 .navbar a.active:after 或 .navbar li.active:after。”

所以我最终得到了以下CSS，它完美无缺！/* 活动插入符 */ .navbar a.active:after { content: ""; 左边距：自动；边距右：自动；填充顶部：2px；边框宽度：0px 10px 10px；边框样式：实心；边框颜色：#ffffff 透明；显示：块；宽度：0；}