Teraz mam pasek nawigacyjny, który wygląda tak:http://bootply.com/78239

Chcę zmaksymalizować szerokość tekstu wejściowego „wyszukiwania”, bez tworzenia podziałów wierszy (tzn., Że łącze „Wyczyść” będzie ściśle powiązane z linkiem „Informacje”).

Mam tylko podstawowe doświadczenie z css i projektowaniem stron internetowych. Czytałem o czymś ”overflow: hidden„sztuczki, ale nie rozumiem, jak z niego korzystać, gdy po prawej stronie elementu docelowego jest więcej elementów.

Dzięki

EDYTOWAĆ:

Częściowym rozwiązaniem może być ustawienie szerokości „ręcznie” dla każdego przypadku, jak w przypadkuhttp://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;
  }
}

ale to rozwiązanie nie zadziała, gdy teksty menu są „dynamiczne” (na przykład zawierają „Hello username”).

Przypuszczam, że nie ma większego problemu, jeśli założysz, że istnieje ograniczenie szerokości tekstów menu - irytujące jest obliczanie / testowanie tych szerokości ręcznie. Jestem po prostu ciekawy, czy jest dobry sposób, aby to zrobić automatycznie.