調整引導選擇組件大小的問題

Question

我決定使用插件（ http://silviomoreto.github.io/ ）美化bootstrap select元素。 該插件使用div，ul和li為每個選項重建select及其選項。 我有一個用例，其中選項的寬度會有點長，我想為包含它們的下拉菜單設置最大寬度，並在需要時顯示滾動條。 到現在為止還挺好。 盡管下拉菜單的大小適當調整，但在長LI本身上卻出現了一個非常奇怪的焦點框。 這是截圖

發生這種情況的原因是LI的大小沒有增加以匹配文本的大小。 我知道這是因為我使用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;
}

---

編輯

我想解決此問題，並保留滾動條，以便選擇組件如下所示：

Answer 1

CSS （ 小提琴 ）

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

小提琴

Answer 3

如果要獨立滾動，可以嘗試

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

（根據需要調整高度）

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