Не удается сделать max-width работать с Bootstrap многоуровневого выпадающего меню [дублировать]

На этот вопрос уже есть ответ здесь:

У меня есть многоуровневое раскрывающееся меню Bootstrap, как показано в этом bootsnipp .

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

Есть идеи, как сделать такое каскадное меню с моими потребностями?

Заранее большое спасибо

1 ответ

  1. Добавьте этот CSS-файл.

    .dropdown-menu>li>a {
        white-space: normal;
        max-width:200px;
    }
    

    Это установит максимальную ширину (в данном примере) каждого элемента якоря в 200px.

    Если вы выбрали размер меньше, чем 160px, вы должны установить минимальную ширину класса drowdown-menu, поскольку это имеет минимальную ширину 160px.

    .dropdown-menu {
        min-width:110px;
    }