Comment append un champ de recherche avec l’icône à la barre de navigation dans Bootstrap 3?

J’utilise le nouveau Bootstrap Twitter 3 et j’essaie de placer un champ de recherche comme celui-ci (ci-dessous) dans la barre de navigation supérieure :

Navbar Search

Dans Bootstrap 2, cela aurait pu se passer comme ceci:

 

Mais je ne suis pas sûr de savoir comment produire la même chose dans Bootstrap 3 car beaucoup de choses ont changé.

Le code HTML par défaut du formulaire de zone de recherche de la barre de navigation dans Bootstrap 3 est le suivant:

  

Comment puis-je le modifier pour obtenir ce dont j’ai besoin?

J’utilise BS3 sur un site de développement et ce qui suit produit l’effet / la présentation que vous demandez. Bien sûr, vous aurez besoin des glyphicons configurés dans BS3.

  

MISE À JOUR: Voir JSFiddle

C’est le plus proche que je pourrais obtenir sans append de CSS personnalisée (ceci je l’avais déjà compris au moment de poser la question; devinez si je dois m’en tenir à cela):

Zone de recherche de la barre de navigation

Et le balisage utilisé:

  

PS: Bien sûr, cela peut être corrigé en ajoutant une margin-left négative margin-left (-4px) sur le bouton, et en supprimant le border-radius la border-radius sur les côtés input et button rencontrent. Mais le but de cette question est de le faire fonctionner sans CSS personnalisé.

Boîte de recherche de la barre de navigation fixe

Vous pouvez utiliser l’exemple des boutons segmentés de Bootstrap 3:

  

J’ai essayé le code de @PhilNicholas et j’ai rencontré le même problème avec @its_me dans les commentaires que la barre de recherche affiche sur la prochaine ligne de la barre de navigation, et j’ai trouvé qu’il fallait append une width atsortingbut à cette form .

 

Celui que j’ai mis en place pour mon site web, Si quelqu’un a plus de no de menu et une barre de recherche plus longue peut l’utiliser

entrer la description de l'image ici

entrer la description de l'image ici

Voici le code

    
 < !DOCTYPE html>        3 Col Portfolio - Start Bootstrap Template           

Page Heading Secondary Text

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.


About

  • Your company address here
  • 0982.808.065
  • anhtuank7c@hotmail.com
  • Fan page
  • 08:00-18:00 Monday to Friday

Other

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.