在 Bootstrap 中删除 Jumbotron 文本下划线答案

【问题标题】：Remove Jumbotron text underline in Bootstrap在 Bootstrap 中删除 Jumbotron 文本下划线
【发布时间】：2016-02-05 05:30:40
【问题描述】：

我在我的 jumbotron 中添加了一些标题和文本，每当我将鼠标悬停在 jumbotron 上时，文本都会下划线，就像它是一个链接一样（它不是）。这是我的html：

<div class ="jumbotron">

    <div class = "container">
        <center><img src = "img/VVlogoFull.png" width = 60%>
            <h2>Welcome - Bienvenidos</h2>
        <p>an online repository of archaeological ceramics</p>
        <p>un repositorio en línea de cerámicas arqueológicas</p>
        <a href = "data.html" class="btn btn-accent">Database</a>
        <a href = "datos.html" class="btn btn-accent">Base de datos</a></center>
    </div>

</div>

我使用的是标准的 Bootstrap css。

您能否建议 html 更改或我可以添加到 style.css 文件中的更改，以便在将鼠标悬停在 jumbotron 上时此文本不会下划线？我已经尝试将其添加到我的样式表中：

.jumbotron h2{
    text-decoration: none;
}

这个在 html 中

<h2 style = "text-decoration : none">

一切都无济于事。其他建议？

【问题讨论】：

首先使用浏览器的开发工具找出下划线的来源——然后应该很容易找出需要使用哪个选择器来覆盖它。
您提供的代码不足以复制您的问题。如果我将此代码放在页面中并使用 Bootstrap 的 CSS，则鼠标悬停时不会出现下划线，即使是链接也不会出现。您的问题代码需要重现问题。见minimal reproducible example。
可能是你的代码有问题。可能有一些标签未关闭，或者可能有一些" 要关闭。请仔细检查您的代码。或者请在此处粘贴完整代码。

标签： html css twitter-bootstrap

【解决方案1】：

所以，我不知道为什么，因为我当然没有那样输入，但是当我在 chrome 中使用检查器时，它显示我的代码为：

<a> <center><img src = "img/VVlogoFull.png" width = 60%>
    <h2>Welcome - Bienvenidos</h2>
<p>an online repository of archaeological ceramics</p>
<p>un repositorio en línea de cerámicas arqueológicas</p></a>

我通过将文本编辑器中的代码更改为以下代码来修复它：

<a style = "text-decoration: none"> <center><img src = "img/VVlogoFull.png" width = 60%>
        <h2>Welcome - Bienvenidos</h2>
    <p>an online repository of archaeological ceramics</p>
    <p>un repositorio en línea de cerámicas arqueológicas</p></a>

幻像代码？

【讨论】：