Question

我正在使用Bootstrap，在我的管理中，我试图让这个导航栏上有一个箭头处于活动状态。目前我在那里放了一些箭头，但问题是它隐藏在主要内容背后。

我在右边的每个元素（主要内容）上使用了position和z-index，但它并不想显示。此导航位于左侧。

以下是显示箭头的代码：

.navbar-inverse .navbar-nav > .active::after
{
  content:"";
  position: absolute;
  top: 14px;
  right: 0px;
  border: 15px solid transparent;
  z-index: 2;
  border-left-color: #000;
}

这是我的结构：

<body>
  <div class="wrapper">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      ....
    </nav>
    <div id="page-wrapper">
     ....
    </div>
   </div>
</body>

这是我对#wrapper和#page-wrapper的看法。我给了他们z-index：-1和一些位置，但仍然没有工作:(

#wrapper 
{
  padding-left: 0;
}

#page-wrapper 
{
  width: 100%;
  padding: 5px 15px;
}

有什么建议吗？

enter image description here

Answer 1

将箭头放在.active > a上：

.navbar-inverse .navbar-nav > .active a:after {
  content:"";
  display:inline-block;
  position: relative;
  left:5px;
  border: 5px solid transparent;
  z-index: 2;
  border-left-color: #fff;
}

您将其添加到列表项中，但由于链接是块，因此它会将其推出。把它放在链接上。

演示：http://jsbin.com/cocedu/1/edit

CSS：::隐藏在右边的元素后面

1 个答案: