问题描述
我有一个 Bootstrap 下拉菜单.在某些情况下,菜单项可能非常大.所以我需要设置一个max-width
.另外,我不希望菜单项被剪切,所以我也必须使用 white-space: normal
.问题是我的 max-width
被完全忽略了.如果我设置 width
代替它确实有效.但我不希望这样,因为我可能有菜单,其中整个菜单的修复空间比 width
小得多.这就是为什么我需要 max-width
而不是 width
来工作.
I have a Bootstrap dropdown menu. The menu items can be quite large in some cases. So I need to set a max-width
. In addition, I don't want the menu items to be cut so I must use white-space: normal
too. The problem is that my max-width
is completely ignored. If I set width
instead it does work. But I do not want that as I may have menus where the whole menu would fix in much less space than width
. That's why I need max-width
to work rather than width
.
这个 JSFiddle 说明了这个问题.如您所见,菜单项没有扩展到 400 像素.
This JSFiddle illustrates the problem. As you can see, the menu items are not expanded up to 400px.
[更新]好吧,我显然错过了 position:relative
.这修复了我尽可能多地隔离的第一个案例的菜单.我的代码实际上依赖于这个 Bootsnipp.在那个例子中,position:relative
打破了这样的级联子菜单.
[UPDATE]Ok, I was clearly missing the position: relative
. That fixes the menu of the first case which I tried to isolate as much as possible. My code actually relies on this Bootsnipp. In that example, position: relative
breaks such a cascade submenu.
任何想法如何使用我的限制制作这样的级联菜单?
Any ideas how can then make such a cascade menu with my contrains?
先谢谢了
推荐答案
您只需要添加以下内容:
You just need to add the following:
width: 100%
max-width: 400px;
您的元素需要一定的宽度,以便 max-width 起作用
Your element needs a certain width so that max-width works
http://jsfiddle.net/dvwz5omq/1/
这篇关于无法使最大宽度与 Bootstrap 下拉菜单一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!