Bootstrap DropdownButton悬停过长

Question

我的DropdownButton有一个问题，我不知道为什么悬停效果比下拉菜单的实际大小要长。我的DropdownButton在Telerik网格中，这可能会导致问题。为了简单起见，我将附上一个截图以及如何实现DropdownButton。如果我发布我正在使用的整个网格，这将是太多太难理解了。

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
    </div>
</div>

如你所见，悬停效果太长了：

​

​

Answer 1

我不认为这与你发布的代码有关。一定有什么东西覆盖了默认的Bootstrap悬停效果。

尝试添加以下内容：

.dropdown-item:focus, .dropdown-item:hover{
  width: 100%;
}