调整引导选择组件大小的问题

Question

我决定使用插件（http://silviomoreto.github.io/）来美化bootstrap select元素。此插件使用div，ul和li为每个选项重建select及其选项。 我有一个用例，其中选项宽度有点长，我想为包含它们的下拉列表设置最大宽度，并在需要时显示滚动条。到现在为止还挺好。 虽然下拉菜单调整正确，但我在长LI本身上得到了一个非常奇怪的焦点框。这是一个截图

这是因为LIs大小没有增加以匹配文本的大小。我知道，因为我使用chrome dev-tools增加了宽度。

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;
}

修改

我想修复此问题并保留滚动条，以便select组件如下所示：

Answer 1

CSS （ Fiddle ）

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

Answer 2

只需添加此css：

.dropdown-menu span.text{
    white-space:normal;
}

<强> Fiddle

Answer 3

如果您想要独立滚动，可以尝试

.dropdown-menu li{
   height:35px;
   overflow:scroll 
}

（调整你想要的高度）

https://jsfiddle.net/linkita/fj4e2uxs/