带有图像和长文本的引导下拉菜单答案

【问题标题】：Bootstrap dropdown menu with image and long text带有图像和长文本的引导下拉菜单
【发布时间】：2019-03-08 05:14:53
【问题描述】：

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

我试过这样的建议：

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

这是我的小提琴： http://jsfiddle.net/azu0zwrr/

有什么想法吗？

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

将此添加到您的 CSS：

.dropdown-menu li a {
word-wrap: break-word;
white-space: normal;
}

小提琴：https://jsfiddle.net/1usvrs3e/

【讨论】：

你可能想在样式上做更多的工作，但这至少会包含你的列表项链接

【解决方案3】：

 Check this out This should be working for you 

     <li ><a><p style="word-wrap: break-word;" ><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 - RosaaSdad</a></p></li>

【讨论】：

【解决方案4】：

这是你想要的吗？我将两个样式标签的宽度都更改为自动。

.dropdown-menu {
   width: auto; white-space: normal;
}
.img-thumbnail {
   width:auto;height:75px;
}

【讨论】：