在 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