Bootstrap在下拉链接的底部显示不需要的轮廓

Question

我有一个带有下拉菜单的链接。问题是，当我点击链接时，下拉列表会打开，但链接底部有不需要的边框线。当我将鼠标悬停在下拉链接上时，隐藏了不需要的底线。但是，只要鼠标从链接中输出，就会再次显示不需要的底线。

这是我的代码：

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="dropdownMenu2" style="color: #333;"><i class="fa fa-gear fa-lg"></i> <span class="caret"></span></a>
    <ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu2">
        <li><a href="#"><i class="fa fa-align-left"></i> Reorder Pages</a></li>
        <li><a href="#"><i class="fa fa-trash"></i> Delete</a></li>
    </ul>
</div>

演示在这里：

Answer 1

可能是边框，轮廓或下划线。  试试这个：

a.dropdown-toggle {
   border: none;
   outline: none;
   text-decoration: none;
}

您可以尝试查看是否只有一个边框底部，只有在您想使用其他边线时才取消它。

Answer 2

在a：toggle类中有文本修饰。删除文字装饰。

a：悬停{

color: #23527c;
text-decoration: underline;  

}

Answer 3

现在你有了

.dropdown-toggle:hover {
  text-decoration: none;
}

只需添加

.dropdown-toggle:hover,
.dropdown-toggle:focus {
  text-decoration: none;
}

在你的CSS中，它解决了问题！

Jsfiddle-example