在Bootstrap下拉菜单中以文本内联显示图像

Question

我在导航栏中有一个下拉菜单，我想在菜单文本旁边显示一个小缩略图头像。我可以让那部分工作，但随后文本会超出下拉列表的边框。我已经看到了一些在超链接旁边显示字体真棒或字形内联的示例。但没有人使用图像调整大小的图像。

它正在使用Bootstrap 3.3.5。以下是手头问题的链接：Bootply

有人可以解释如何解决这个问题吗？非常感谢！

Answer 1

尝试使用此解决方案。

   .dropdown-menu a.avatar img {
    display: inline;
    width: 20%;
    height: 20%;
}

.dropdown-menu {min-width:300px}

@media screen and (max-widht: 780px) {
    dropdown-menu {
        max-width:100%
  }
}

Demo