如何删除悬停在引导程序中的CSS下划线

Question

我是bootstrap和CSS的新手

我正在尝试使用我在Bootsnipp上找到的以下代码段。

http://bootsnipp.com/snippets/xaWpR

（该链接包含代码和预览）

我设法按照我想要的方式更改颜色和字体，但如何从标签中删除下划线效果？

谢谢。

Answer 1

使用outline:none;，这将修复您的点线问题，然后使用text-decoration:none删除锚标记的默认下划线

.tabs nav li.tab-current a {
   outline:none;
}
.tabs nav a {
  text-decoration:none;
}

Answer 2

在悬停链接时将text-decoration设置为none。

.tabs ul li a:hover {
  text-decoration: none;
}

Answer 3

编辑已经分配的引导程序样式总是不好的做法。

只需将类添加到您的html元素并编辑该类。

假设你有：

<ul>
    <li>
         <a class="text-center custom_a"href="#">Link</a> 
    </li>
    <li>
         <a class="text-center custom_a"href="#">Link</a> 
    </li>
</ul>

现在有些人编辑已经预定义的引导类：text-center，它将文本置于外部元素的中心，这是一个非常糟糕的做法，原因如下：

• 最终输出取决于最后加载的样式。
• 您必须使用！important覆盖样式，应该随时随地避免使用。

您也可以浏览DOM：

ul li a {;}

现在想象有几个uls或lis。然后你必须用pseudo-selectors.旅行DOM。旅行需要更多时间来匹配DOM元素和样式参数。

在你的情况下，只需这样做：

.custom_a, .custom_a_hover {text-decoration:none;}

Answer 4

您可以使用此功能，因为删除了悬停和焦点的下划线。

.tabs nav a {
    text-decoration: none;
}

Answer 5

.tabs nav a {
    text-decoration: none;
}