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 的此 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;
}

证明：

/* 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;
}

Answer 2

如果您在项目中编译 Sass，则可以使用 Bootstrap 的 Sass 变量设置锚链接样式。这是他们重启风格的一部分。

设置以下选项以仅在将鼠标悬停在链接上时看到下划线。

$link-decoration: none;
$link-hover-decoration: underline;

在此处查看相关的 Bootstrap 源代码

Answer 3

是的，从 Bootstrap 5 alpha1 开始，迁移文档指出：

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

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

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

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

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

演示

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

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

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

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