CSS Bootstrap 4 中没有线条装饰的标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49634143/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
a tag without line-decoration in Bootstrap 4
提问by D M
I would like to have a link that looks just like plain text except for the cursor by using as few css as possible.
我希望通过使用尽可能少的 css 来获得一个看起来像纯文本的链接，除了光标。
The problem: <a>has a blue color (that darkens when hovered) and also has underline on hover. I want it to look like plain text (black without underline).
问题：<a>有蓝色（悬停时变暗），悬停时也有下划线。我希望它看起来像纯文本（黑色没有下划线）。
By using the Bootstrap class "text-dark" I managed to get rid of the blue color. But how do I get rid of the underline (text-decoration) without writing css?
通过使用 Bootstrap 类“text-dark”，我设法摆脱了蓝色。但是如何在不编写 css 的情况下摆脱下划线（文本装饰）？
.no-underline:hover {
text-decoration: none;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<span>Standard text</sapn>
<hr>
<a href="#">Standard a tag. Different colors and underline on hover</a>
<hr>
<a href="#" class="text-dark">a tag with text-dark class. Note underline on hover</a>
<hr>
<a href="#" class="text-dark no-underline">a tag with text-dark class and css to disable underline on hover</a>回答by Leon
Bootstrap 4 has the class "text-decoration-none"
Bootstrap 4 具有“text-decoration-none”类
<a href="#" class="text-decoration-none">no underline</a>
https://getbootstrap.com/docs/4.3/utilities/text/#text-decoration
https://getbootstrap.com/docs/4.3/utilities/text/#text-decoration
回答by Zim
There are several Bootstrap 4 classes that set text-decoration: none. Without knowing the semantic context of the link, I suggest you use the .btnclass...
有几个 Bootstrap 4 类设置了text-decoration: none. 在不知道链接的语义上下文的情况下，我建议您使用.btn该类...
<a href="#" class="text-dark btn">a tag with text-dark class and css to disable underline on hover</a>
https://www.codeply.com/go/CIt6zI0Iqw
https://www.codeply.com/go/CIt6zI0Iqw
However, there may be a class that works better semantically such as nav-link(inside nav), card-link(inside cards), or .breadcrumb-item. Also, note that Bootstrap 4 only applies the underline to anchor links with the href=""attribute. A simple anchor anchor will not have an underline on hover.
但是，可能有一个类在语义上更有效，例如nav-link(inside nav)、card-link(inside card) 或.breadcrumb-item. 另请注意，Bootstrap 4 仅将下划线应用于具有该href=""属性的锚链接。一个简单的锚点在悬停时不会有下划线。
