无法通过Bootstrap下拉菜单使最大宽度工作 [英] Cannot make max-width work with Bootstrap dropdown-menu

问题描述

我有一个Bootstrap下拉菜单。在某些情况下，菜单项可能相当大。所以我需要设置一个 max-width 。另外，我不想要菜单项被削减，所以我必须使用空格：正常。问题是我的 max-width 完全被忽略。如果我设置 width ，那么它会工作。但是我不想要这样，因为我可能有菜单，整个菜单将比 width 更少的空间修复。这就是为什么我需要 max-width 而不是 width 。

此 JSFiddle 说明了此问题。您可以看到，菜单项不会扩展到400px。

[更新]
好​​的，我显然缺少的位置：相对。这修复了我试图尽可能隔离的第一种情况的菜单。我的代码实际上依赖于此Bootsnipp 。在这个例子中， position：relative 打破了这样的级联子菜单。

任何想法如何能够与我的禁忌进行这样的级联菜单？

非常感谢您的支持

解决方案

min-width 属性的值，因为它设置为160px;

  .dropdown-menu {
 max-width：100px; 
最小宽度：1％; 
} 
  

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.

This JSFiddle illustrates the problem. As you can see, the menu items are not expanded up to 400px.

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

Thanks a lot in advance

解决方案

You have to change the value of the min-width property because it is set to 160px;

.dropdown-menu {
  max-width: 100px;
  min-width: 1%;
}

这篇关于无法通过Bootstrap下拉菜单使最大宽度工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！