Выпадающее меню в две строки

Question

Привет У меня возникли некоторые проблемы при создании панели навигации с выпадающим меню, мне нужна вся информация в одной строке, но имя моего меню и стрелка не совпадают.

A CSS элемент создан: .dropdown-toggle::after{display: inline-block;}

И моя панель навигации выглядит следующим образом:

Я пробовал большинство примеров dropdown / navbars, которые я нашел на веб-сайте Bootstrap, но каждый раз, когда результат отображается в двух строках. Как я могу исправить это, чтобы мой ярлык и моя стрелка были в одной строке?

Answer 1

Важные моменты:

1. Если вам нужен весь контент в одной строке, используйте white-space: nowrap; или уменьшите размер шрифта.
2. , как вы упомянули, вам нужна стрелка в та же самая строка, но не из-за меньшего количества места там, поэтому используйте абсолютное положение для стрелки.
3. После того, как вы сделаете его однострочным по свойству пробела, вам нужно будет создать многоточие там, чтобы ваш контент не был выглядят странно.
4. , чтобы сделать многоточие: используйте overflow:hidden; для его родителя и text-overflow:ellipsis для вашего текста