Сейчас у меня есть панель навигации, которая выглядит так: http://bootply.com/78239
Я хочу максимизировать ширину текстового ввода "поиск" без создания разрывов строк (т.е. что ссылка "Очистить" будет жесткой с помощью ссылки "О программе" ).
У меня есть только базовый опыт работы с CSS и веб-дизайном. Я прочитал кое-что о трюках overflow: hidden
, но я не понимаю, как его использовать, когда есть элементы справа от целевого элемента.
Спасибо
EDIT:
Частным решением может быть установка ширины "вручную" для каждого случая, например, в 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" ).
Я полагаю, что это не большая проблема, если вы предполагаете, что существует ограничение на ширину текста текста - это просто раздражает, чтобы вычислить/проверить эти ширины вручную. Мне просто интересно узнать, есть ли аккуратный способ сделать это автоматически.