javascript - 带有图像和长文本的 Bootstrap 下拉菜单

Question

我正在尝试使用 Bootstrap 创建一个下拉菜单，其中包含图像和长文本，可能需要自动换行才能使其宽度在 500px 内

我尝试了这样的建议:

.dropdown-menu {
    width: 500px;
    white-space: normal;
}

这是我的 fiddle : http://jsfiddle.net/azu0zwrr/

有什么想法吗？

Answer 1

尝试添加:

overflow: hidden;

<小时/>

.dropdown-menu li{
  width: 500px; white-space: normal;overflow: hidden;
}
.img-thumbnail {
  width:75px;height:75px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>

<div class="btn-group"><button aria-expanded="true" data-toggle="dropdown" class="btn btn-primary btn-lg dropdown-toggle" type="button">Selecione um produto&nbsp;&nbsp;&nbsp;<b class="caret"></b></button><ul class="dropdown-menu"><li><a><img class="img-thumbnail hidden-xs" src="http://www.extra-imagens.com.br/Control/ArquivoExibir.aspx?IdArquivo=107393037">&nbsp;&nbsp;Tablet Multilaser ML Supra Quad Core com Tela 7”, 8GB, Wi-Fi, Android 4.4, Suporte à Modem 3G e Processador Quad Core - Rosa</a></li><li><a><img class="img-thumbnail hidden-xs" src="http://www.extra-imagens.com.br/Control/ArquivoExibir.aspx?IdArquivo=107392987">&nbsp;&nbsp;Tablet Multilaser ML Supra Quad Core com Tela 7”, 8GB, Wi-Fi, Android 4.4, Suporte à Modem 3G e Processador Quad Core - Branco</a></li></ul></div>