Question

（我在这个上使用bootstrap 3.3.7）

您好。我想在我的bootstrap导航栏上产生效果，即在用户所在的部分（我在我的One-Page网站上使用标签），导航栏中的文本仅通过滚动自动突出显示。我已经设置了下降锚链接......

因此，使用body标签的这些附加属性，它到目前为止工作得很好

<body data-spy="scroll" data-target=".navbar-collapse">

......但有一个问题。我只希望导航栏中的TEXT看起来是活动的，突出显示。但正如你在图片上看到的那样（上面的示例），现在围绕突出显示的导航栏链接有一个类似的框。它来自哪儿。我该如何摆脱它，所以只有文字颜色在它活跃时才会变亮？ Look on the image here. The upper example is the problem now, and the bottom one is how I would like it, but with using scrollspy. So not that black box.

先问候我的朋友们，并且非常感谢

Answer 1

您需要将<a>标记的活动状态更改为无背景。当您使用scrollspy滚动时，Bootstrap会将包含链接的li添加到活动类。所以它将类似于以下内容：

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus{
  background:none;
}

在上面的示例中，我还包括了悬停和焦点状态，但是如果您想要更改自己可以通过图像中的颜色自行执行的操作，我假设您使用的是navbar-inverse正在使用像navbar-default这样的其他内容，你必须相应地改变它。

Bootstrap Scrollspy：删除Box突出显示。仅文字

1 个答案: