如何修改Bootstrap中col列内超链接颜色并去除text-decoration

方案1：使用Bootstrap原生工具类（无需额外写CSS） #

适用Bootstrap 4.1及以上版本，直接给a标签添加对应工具类即可：

• text-decoration-none：移除超链接默认下划线
• text-*系列颜色类：修改文本颜色，常用的有text-primary、text-dark、text-success等，如果你提前配置了Bootstrap自定义主题色，也可以直接用对应颜色类

修改后的完整代码示例：

<div class="container">
    <div class="row">
      <div class="col-12 col-lg-3">
        <a href="Container.html" class="text-decoration-none text-dark">Container</a>
      </div>
      <div class="col-12 col-lg-3"><a href="grid.html" class="text-decoration-none text-dark">Grid</a></div>
      <div class="col-12 col-lg-3"><a href="Columns.html" class="text-decoration-none text-dark">Columns</a></div>
      <div class="col-12 col-lg-3"><a href="Gutter.html" class="text-decoration-none text-dark">Gutter</a></div>
    </div>
</div>

方案2：自定义CSS控制（适合自定义特殊颜色/全局统一控制） #

如果需要使用非常规主题色，或者要统一控制整组链接的交互样式，可以给父容器加自定义类后写CSS规则：

修改后的HTML代码 #

<!-- 给父容器添加自定义类custom-link-group -->
<div class="container custom-link-group">
    <div class="row">
      <div class="col-12 col-lg-3">
        <a href="Container.html">Container</a>
      </div>
      <div class="col-12 col-lg-3"><a href="grid.html">Grid</a></div>
      <div class="col-12 col-lg-3"><a href="Columns.html">Columns</a></div>
      <div class="col-12 col-lg-3"><a href="Gutter.html">Gutter</a></div>
    </div>
</div>

对应的CSS代码 #

/* 移除下划线+修改默认状态颜色 */
.custom-link-group a {
  text-decoration: none;
  color: #333; /* 替换为你需要的色值即可 */
}
/* 可选：控制hover悬浮状态的样式 */
.custom-link-group a:hover {
  color: #0d6efd;
  /* 如果hover需要下划线可以新增规则：text-decoration: underline; */
}

内容的提问来源于stack exchange，提问作者user17416872