Bootstrap 4中没有行装饰的标签

Question

我希望有一个看起来像纯文本的链接,除了光标,尽可能少使用css.

问题:<a>有一种蓝色(悬停时会变暗),并且在悬停时也有下划线.我希望它看起来像纯文本(黑色没有下划线).

通过使用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>

Answer 1

设置了几个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

但是,可能有一个类在语义上更好地工作,例如nav-link(内部导航),card-link(内部卡),或.breadcrumb-item.另请注意,Bootstrap 4仅将下划线应用于具有该href=""属性的锚点链接.一个简单的锚点锚点在悬停时不会有下划线.

Answer 2

Bootstrap 4具有“ text-decoration-none”类

<a href="#" class="text-decoration-none">no underline</a>

https://getbootstrap.com/docs/4.3/utilities/text/#text-decoration