Bootstrap 5 下划线默认更改？

Question

在 Bootstrap 4 中，我理解它将默认文本装饰设置为 none。

但是使用 Bootstrap 5 如果我只是添加一个原始锚标记，它现在会同时显示蓝色文字和下划线。

我希望只在悬停时显示 underrine。这是 bootstrap 5 在发行版中更改的内容吗？我找不到任何说明它的文档。

目前我使用：

    a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
    color: inherit
}

但是这也会影响作为链接的任何按钮，例如

<a href="{% url 'answer-create' question.id %}" class="btn btn-outline-dark mr-2 py-0">Answer</a>

Answer 1

是的，从 Bootstrap 5 alpha1 开始 migration docs state:

"Links are underlined by default (not just on hover), unless they’re part of specific components"

您可以像这样创建一个特殊的 class：

.text-underline-hover {
    text-decoration: none;
}

.text-underline-hover:hover {
    text-decoration: underline;
}

<a href="#" class="text-underline-hover">Link</a>

Demo

或，如果您希望它应用于除包含 class= 属性的锚点之外的所有锚点，请使用：

a:not([class]) {
    text-decoration: none;
}

a:not([class]):hover {
    text-decoration: underline;
}

这不会影响 btn，只有没有 class 的链接会在悬停时加下划线。

Answer 2

你的 <a> 标签也有 btn class 这就是你出现这种行为的原因。

class="btn btn-outline-dark mr-2 py-0"

因为bootstrap中的按钮也有btnclass。这就是为什么 CSS.

a:hover {
    text-decoration: underline;
    color: inherit
}

所有带有 class btn 的按钮也都带有下划线。

解法：

只需从 <a> 中删除 btn btn-outline-dark 并使用自定义 class 来设置样式。

<a href="{% url 'answer-create' question.id %}" class="mylink mr-2 py-0">Answer</a>

Answer 3

由于默认锚点现在带有下划线，定义自定义 CSS 规则很棘手，因为这些规则会干扰组件（例如导航栏、下拉菜单...）。

我认为官方解决方案将在所有锚点上使用 .text-decoration-none。这有点烦人，但它是明确的，我们都希望它是面向未来的。 :)

Answer 4

一体化解决方案

Bootstrap 5 的 CSS 代码不会为您的 <a ...> 链接添加下划线（除非将鼠标悬停在）：

即使他们有另一个 class 像 mb-4 等等
除非他们有 btn class，在这种情况下他们保持不变。

将代码复制粘贴到您的 CSS 文件中：

/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
    text-decoration: none;
}
a:not([class*="btn"]):hover {
    text-decoration: underline;
}

证明：

/* Simulate Bootstrap 5 CSS */
a { 
    text-decoration: underline;
}
a:hover { 
    text-decoration: underline;
}
a.btn {
   text-decoration: none;
   border: 1px solid #ccc;
}
a.btn:hover {
   text-decoration: none;
   border: 1px solid #ccc;
   background-color:  #ccc;
}

/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
    text-decoration: none;
}
a:not([class*="btn"]):hover {
    text-decoration: underline;
}

<a href="foo.html">An a link without class</a><br/>
<br/>
<a href="foo.html" class="cool">An a link with class cool</a><br/>
<br/>
<a href="foo.html" class="btn">An a link with class btn</a>

Bootstrap 5 下划线默认更改？

Bootstrap 5 underline default changed?

html

bootstrap-4

bootstrap-5