Bootstrap 3 - Como maximizar a largura de entrada dentro da barra de navegação
Agora eu tenho uma barra de navegação que se parece com:http://bootply.com/78239
Quero maximizar a largura da entrada de texto de "pesquisa", sem criar quebras de linha (ou seja, que o link "Limpar" seja restrito ao link "Sobre").
Eu só tenho experiência básica com CSS e web design. Eu li algo sobre "overflow: hidden
"truques, mas não entendo como usá-lo quando há mais elementos à direita do elemento de segmentação.
obrigado
EDITAR:
Uma solução parcial pode ser definir a largura "manualmente" para cada caso, como emhttp://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;
}
}
mas essa solução não funcionará quando os textos do menu forem "dinâmicos" (por exemplo, conter "Hello username").
Eu suponho que não é um grande problema se você assumir que há um limite nas larguras dos textos do menu - é simplesmente irritante calcular / testar essas larguras manualmente. Estou apenas curioso para saber se existe uma maneira legal de fazer isso automaticamente.