Невозможно выполнить максимальную работу с выпадающим меню Bootstrap

Question

У меня есть раскрывающееся меню Bootstrap. В некоторых случаях элементы меню могут быть довольно большими. Поэтому мне нужно установить max-width. Кроме того, я не хочу, чтобы пункты меню были отрезаны, поэтому я должен также использовать white-space: normal. Проблема в том, что мой max-width полностью игнорируется. Если я установил width, он будет работать. Но я не хочу этого, поскольку у меня могут быть меню, где все меню будет исправляться в гораздо меньшем пространстве, чем width. Вот почему мне нужно max-width работать, а не width.

Эта проблема JSFiddle. Как вы можете видеть, элементы меню не расширены до 400 пикселей.

[UPDATE] Хорошо, мне явно не хватает position: relative. Это исправляет меню первого случая, который я пытался изоляцию как можно больше. Мой код фактически полагается на this Bootsnipp. В этом примере position: relative разбивает такое каскадное подменю.

Любые идеи, как можно сделать такое каскадное меню с моими промахами?

спасибо заранее

Answer 1

Просто переопределить position: absolute; стиль от .dropdown-menu с position: relative;.

По умолчанию dropmenu является абсолютным положением к его родительскому элементу . Он будет иметь ту же ширину, если задан стиль width: 100%. , так как у него есть min-width, которые делают его выше его родителя ширина. Поэтому мы должны сделать dropmenu независимым от его ширины родительского элемента .

Я надеюсь, что это поможет вам

Answer 2

Вам просто нужно добавить следующее:

width: 100% 
    max-width: 400px; 

Ваш элемент нуждается в определенной ширины, так что максимальная ширина работает

http://jsfiddle.net/dvwz5omq/1/

Answer 3

Вы должны изменить значение свойства min-width, так как оно установлено равным 160p Икс;

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