jquery - 调整 bootstrap-select 组件大小的问题

Question

我决定使用插件( http://silviomoreto.github.io/ )来美化 Bootstrap 选择元素。该插件使用 div、ul 和 li 为每个选项重建选择及其选项。 我有一个用例，其中选项宽度有点长，我想为包含它们的下拉列表设置最大宽度，并在需要时显示滚动条。到目前为止，一切都很好。 尽管下拉菜单的大小调整正确，但我在长 LI 本身上看到了一个非常奇怪的焦点框。这是截图

发生这种情况是因为 LI 大小没有增加以匹配文本大小。我知道这一点，因为我使用 chrome 开发工具增加了宽度。

LI 在不同浏览器上看起来不同，但问题是相同的。

我想添加一个 css(或者在最坏的情况下是一个脚本)，它可以将 LI 的大小调整为适当的宽度来解决这个问题，但我不知道该怎么做。

你能帮忙吗？

谢谢

https://jsfiddle.net/sw5j6ppz/

HTML

<select class="my-select">
<option>Option 1 is way too long for this small select and it will overflow for sure</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

jQuery

$(document).ready(function() {
    $("select").selectpicker({dropupAuto: false});
})

CSS

.my-select div.dropdown-menu {
  width: 200px;
}

---

编辑

我想解决这个问题并保留滚动条，以便选择组件看起来像这样:

Answer 1

CSS ( Fiddle )

.bootstrap-select.btn-group .dropdown-menu li{
  display:block;
  float:left;
  clear:both;
  min-width:100%;
}