Bootstrap 5下划线默认更改？

Question

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

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

我希望只在悬停时显示 undelrine。这是 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：

“链接默认带有下划线（不仅仅是悬停），除非它们是特定组件的一部分”

你可以像这样创建一个特殊的类：

.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

一体化解决方案

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

• 即使他们有另一个课程，例如 mb-4 等
• 除非他们有 btn 类，在这种情况下他们保持不变。

复制粘贴到您的 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>

Answer 3

您的 <a> 标记也有 btn 类，这就是您出现这种行为的原因。

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

因为引导程序中的按钮也有 btn 类。这就是为什么要使用 CSS。

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

btn 类的所有按钮也变为下划线。

解决方案：

只需从<a> 中删除btn btn-outline-dark 并使用自定义类对其进行样式设置。

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

Answer 4

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

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