css - 带有字形图标的 Bootstrap 下拉菜单

Question

我正在研究使用 Bootstrap 的下拉组件构建的类似选择的控件。可以看看here .所选选项标有 ok 字形。

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

1. 打开下拉菜单并选择一些选项

   

2. 请注意，所有文本标签均等对齐

3. 关闭并再次打开下拉菜单

4. 先前选择的选项中的文本略有移动。

   

在 Chrome 54/55 中测试。

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

Answer 1

这是由于 inline-block 属性。在 li.selected 上使用 display:flex 属性。喜欢:

li.selected {
  display: flex;
}

我已经更新了你的 Plunker 代码。请看一下。

希望这对您有所帮助!