Bootstrap用glyphicons下拉

Question

我正在使用Bootstrap的下拉组件构建类似select的控件。你可以看一下here。所选选项标有ok glyphicon。

我面临着相当奇怪的问题。重现的步骤：

1. 打开下拉列表并选择一些选项

   

2. 请注意，所有文字标签均匀对齐

3. 再次关闭并打开下拉列表

4. 以前选择的选项中的文字略有移位。

   

在Chrome 54/55中测试。

有什么想法吗？提前谢谢。

Answer 1

这是由inline-block属性引起的。在display: flex上使用li.selected属性。像：

li.selected {
  display: flex;
}

我已更新您的 Plunker 代码。请看看。

希望这有帮助！

Answer 2

你可以试试这个：

.open>.dropdown-menu {
    padding: 5px;
}

li.selected {
    padding-left: 0px;
}

对我来说很好。