无法使最大宽度与 Bootstrap 下拉菜单一起使用 [英] Cannot make max-width work with Bootstrap dropdown-menu

问题描述

我有一个 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 下拉菜单一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！