Bootstrap 4 полноэкранный поиск без прерывания навигации

Question

Благодаря Bootstrap 4 мы можем, наконец, легко и без взломов создавать полноразмерные панели поиска в панели навигации.

Unsing что-то вроде этого

<form class="ml-3 my-auto d-inline w-100">

мы можем создать такую ​​красивую панель поиска во всю ширину, как мы видим здесь:

https://www.codeply.com/go/sbfCXYgqoO

То, с чем я до сих пор борюсь, это многословные навигационные ссылки.

например. Вы можете увидеть здесь в навигации Stackoverflow ссылки «Вопросы» (одно слово), а также «Задания разработчика» (два слова). В этом нет ничего особенного, но решение с этим борется.

Если вы добавите такую ​​многословную навигационную ссылку в приведенный пример, навигационная ссылка разорвет / вынудит разрыв строки, а также увеличится высота панели навигации:

https://www.codeply.com/go/BO4QBpaqYD

Я бы хотел, чтобы навигационные ссылки из нескольких слов оставались в одной строке, запрещали разрыв строки и, следовательно, сохраняли высоту панели навигации.

Есть идеи, как решить эту проблему?

Спасибо и всего наилучшего

Answer 1

Вы используете имя класса w-100 в форме. Он устанавливает ширину элемента формы на 100%. Поэтому места недостаточно и поэтому текст разрывается.

Вместо этого используйте flex-grow-1, чтобы исправить проблему. Он устанавливает свойство flex формы 1.

<form class="mx-2 my-auto d-inline flex-grow-1">

При этом form занимает все свободное место внутри навигационной панели.

Вы должны использовать Bootstrap 4.1, так как более низкая версия не имеет имен этого класса.

отметьте это ручка

Обновление

У вас может возникнуть желание использовать text-nowrap, что может решить проблему. Но вы не должны использовать это, потому что это только предотвращает перенос текста, и проблема все еще там.