Question

我正在尝试创建一个带有Bootstrap的下拉菜单，其中包含图像和一个长文本，可能需要自动换行，以便在宽度为500px的范围内

我尝试了这样的建议：

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

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

有什么想法吗？

Answer 1

尝试添加：

overflow: hidden;

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

将此添加到您的css：

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

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

Answer 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>

Answer 4

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

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

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

4 个答案: