Bootstrap 3 - So maximieren Sie die Eingabebreite in der Navigationsleiste

Im Moment habe ich eine Navigationsleiste, die so aussieht:http://bootply.com/78239

Ich möchte die Breite der Texteingabe "Suchen" maximieren, ohne Zeilenumbrüche zu erzeugen (d. H., Dass der Link "Löschen" eng mit dem Link "Info" ist).

Ich habe nur Grundkenntnisse in CSS und Webdesign. Ich habe etwas gelesen über "overflow: hidden"Tricks, aber ich verstehe nicht, wie ich es verwenden soll, wenn sich rechts vom Zielelement mehr Elemente befinden.

Vielen Dank

BEARBEITEN:

Eine Teillösung kann sein, die Breite für jeden Fall "manuell" einzustellen, wie inhttp://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;
  }
}

Diese Lösung funktioniert jedoch nicht, wenn die Menütexte "dynamisch" sind (z. B. "Hallo Benutzername" enthalten).

Ich nehme an, es ist kein großes Problem, wenn Sie davon ausgehen, dass die Breite der Menütexte begrenzt ist - es ist nur ärgerlich, diese Breiten manuell zu berechnen / zu testen. Ich bin nur neugierig zu wissen, ob es eine gute Möglichkeit gibt, dies automatisch zu tun.