Bootstrap 5下划线默认设置是否更改?

Bootstrap 5 underline default changed?(Bootstrap 5下划线默认设置是否更改?)

本文介绍了Bootstrap 5下划线默认设置是否更改?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

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

推荐答案

是,从引导5字母1开始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的链接才会在悬停时加下划线。

这篇关于Bootstrap 5下划线默认设置是否更改?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Bootstrap 5下划线默认设置是否更改?

基础教程推荐