引入Bootstrap后所有a标签自动添加文本装饰的解决方法咨询

Bootstrap默认会给<a>标签添加下划线（文本装饰），这是它的内置默认样式。你可以通过以下几种方式修改：

1. 全局移除所有链接的文本装饰 #

在你的自定义CSS文件（注意要放在Bootstrap CSS之后引入）中添加代码：

a {
  text-decoration: none !important;
}

如果不想用!important强制覆盖，也可以通过提高选择器优先级实现，比如写成body a。

2. 针对特定状态修改文本装饰 #

要是只想去掉链接hover/active状态的下划线，或者反过来调整，可以这么写：

/* 移除hover、focus、active状态的下划线 */
a:hover, a:focus, a:active {
  text-decoration: none;
}

/* 或者全局去掉默认下划线，仅hover时显示 */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

3. 使用Bootstrap自带工具类 #

Bootstrap提供了text-decoration-none工具类，直接给需要去掉下划线的<a>标签添加即可：

<a href="#" class="text-decoration-none">无下划线的链接</a>

这种方式适合只修改个别链接的场景。

内容的提问来源于stack exchange，提问作者M-Y-H_86