我正在尝试
我想在Bootstrap中修改下拉菜单即 ul.dropdown-menu
的宽度。
错误
如果列表项的内容很长,则会通过下拉菜单溢出。
的jsfiddle
代码
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3" style="width:400px;">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<!-- Below is the buggy list-item -->
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">A very long content overflows
the list-item if ul.dropdown-menu's width is fixed
</a>
</li>
</ul>
在第一行,我得到了style="width:400px;"
。 Rest all是Bootstrap的正常语法。
外观如何
我希望它看起来如何
我希望长内容分成新行,以便它看起来像这样:
我尝试了什么
所有这些都没有用。
display: block;
添加到错误 li
(内容溢出的内容)和内部的<a>
内容。word-break
到 buggy li
和<a>
。max-width
到 buggy li
和<a>
。display: table;
添加到ul.dropdown-menu
会删除其下拉功能并导致其宽度增加,以便完全包装错误 li
。<div style="display:block;>"
中添加li
以包装内容。display: block !important;
到 buggy li
。display: block; to
ul.dropdown-menu`也会删除下拉功能。我不想要
答案 0 :(得分:3)
您可以从white-space: nowrap;
删除.dropdown-menu>li>a
吗?或者将white-space: normal;
设置为<a>
。
答案 1 :(得分:1)
这里需要的是标签上的空白区域:
.dropdown-menu > li > a {white-space:normal}
答案 2 :(得分:1)
尝试替换此
<a role="menuitem" tabindex="-1" href="#" style="word-wrap:break-all">
A very long content overflows the list-item if ul.dropdown-menu's width is fixed
</a>
有了这个:
<a role="menuitem" tabindex="-1" href="#" style="white-space:normal">
A very long content overflows the list-item if ul.dropdown-menu's width is fixed
</a>
White-space非常有帮助,我喜欢白色空间。