我想删除 Bootstrap 链接中的下划线

Question

我见过类似的问题，但解决方案建议通过CSS进行更改。 我尝试过但无法重现我的代码的解决方案。目前链接看起来像这样 我还探索了

react-bootstrap

文档，但没有提到任何特定的标签来删除该样式

我想删除蓝色下划线。

代码：

                      <ListGroup.Item>
                        <Link to={`/panelmember/${item._id}`}>
                          <Card.Title as="h2">
                            <strong>{item.name}</strong>
                          </Card.Title>
                        </Link>
                      </ListGroup.Item>

有没有办法在

<Link>

标签内添加短代码？或者，如果我们必须在

index.css

中对其进行自定义，那么您能否建议任何解决方案。

Answer 1

.links {
  text-decoration: none;
}

<Link className={`links`} to={`/panelmember/${item._id}`}>
  <Card.Title as="h2">
    <strong>{item.name}</strong>
  </Card.Title>
</Link>

像这样

Answer 2

Bootstrap 4 使用 Sass 进行样式设置（Sass 是一种预处理器脚本语言，可解释或编译为级联样式表 - 请参阅 https://sass-lang.com/）。有关 Bootstrap 主题的详细信息，请参阅 https://getbootstrap.com/docs/4.0/getting-started/theming/。

如果您使用 Sass 编译 CSS 文件，则可以通过将以下内容添加到 scss 文件（在导入 bootstrap 之前）来覆盖链接的默认 Bootstrap 样式（即下划线）：

$链接装饰：无；

Answer 3

class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover"

只需将此类添加到每个链接即可。