Bootstrap 3 - Cómo maximizar el ancho de entrada dentro de la barra de navegación

Ahora mismo tengo una barra de navegación que se parece a:http://bootply.com/78239

Quiero maximizar el ancho de la entrada de texto de "búsqueda", sin crear saltos de línea (es decir, que el enlace "Borrar" estará ajustado con el enlace "Acerca de").

Solo tengo experiencia básica con css y diseño web. Leí algo sobre "overflow: hidden"trucos, pero no entiendo cómo usarlos cuando hay más elementos a la derecha del elemento seleccionado.

Gracias

EDITAR:

Una solución parcial puede ser establecer el ancho "manualmente" para cada caso, como enhttp://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;
  }
}

pero esta solución no funcionará cuando los textos del menú sean "dinámicos" (por ejemplo, contienen "Hola nombre de usuario").

Supongo que no es un gran problema si asume que hay un límite en los anchos de los textos del menú; es simplemente molesto calcular / probar esos anchos manualmente. Solo tengo curiosidad por saber si hay una forma clara de hacerlo automáticamente.

Respuestas a la pregunta(2)

Su respuesta a la pregunta