引导在下拉链接底部显示不需要的轮廓。

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:切换类有文字装饰。删除文字装饰。

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-示例