Bootstrap 3 - Как максимизировать ширину ввода внутри navbar
Прямо сейчас у меня есть панель навигации, которая выглядит следующим образом:http://bootply.com/78239
Я хочу максимизировать ширину текстового ввода «поиск», не создавая разрывов строк (то есть, что ссылка «Очистить» будет тесно связана со ссылкой «О программе»).
У меня есть только базовый опыт работы с CSS и веб-дизайном. Я читаю кое-что оoverflow: hidden
"трюки, но я не понимаю, как использовать его, когда есть больше элементов справа от целевого элемента.
Спасибо
РЕДАКТИРОВАТЬ:
Частичным решением может быть установка ширины «вручную» для каждого случая, как вhttp://bootply.com/78247 :
@media (max-width: 767px) {
#searchbar > .navbar-form {
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#searchbar > .navbar-form {
width: 205px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#searchbar > .navbar-form {
width: 425px;
}
}
@media (min-width: 1200px) {
#searchbar > .navbar-form {
width: 625px;
}
}
но это решение не будет работать, когда тексты меню являются «динамическими» (например, содержат «Hello username»).
Я полагаю, что это не большая проблема, если вы предполагаете, что есть ограничения на ширину текстов меню - просто раздражает вычислять / тестировать эти ширины вручную. Мне просто любопытно узнать, есть ли удобный способ сделать это автоматически.