在引导程序导航

Question

我有一个bootstrap导航：

突出显示的位当前是导航的列表元素，因此，颜色在悬停时会发生变化，并且可以用作导航操作。我想将它用作静态标签，旨在向用户显示它们在应用程序中的位置。我知道我可以添加课程＆＃39; disabled＆＃39;让它看起来更少＆＃39;可点击，但在悬停时仍会略有变化，并显示默认光标以外的光标。

我希望将它显示为一个简单的居中标签，看起来不会以任何方式点击。

Answer 1

在标签上使用var packages = { 'app': { main: 'scripts/boot.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' } }; 将禁用该元素注册任何鼠标事件，包括悬停效果并绕过您使用它的问题。

Answer 2

在写完这个问题后，我决定只为有问题的特定元素覆盖Bootstrap的样式，以便它们静态显示。

HTML：

<ul class="nav nav-tabs">
  <li><a><span class="glyphicon glyphicon-menu-left"></span></a></li>
  <li class="label-li disabled"><a href="#"></a></li>
  <li href="#"><span class="glyphicon glyphicon-trash"></span> </a></li>
</ul>

的CSS：

.label-li {
  width: 80%;
  font-weight: bold;
}
.label-li a {
  width: 100%;
  text-align: center;
  cursor: default !important;
  border: none !important;
}

以!important结尾的两行是阻止引导者接管的风格。

Answer 3

虽然您的解决方案确实有效，但我建议您改为使用：hover选择器（http://www.w3schools.com/cssref/sel_hover.asp）。这就是bootstrap在内部创建各种效果的功能，使用它可以覆盖它指定的所有属性，例如颜色和光标更改。只需使用以下方法将它们分配给正常值：hover并且不会发生任何变化，不需要使用！important。