Bootstrap vergrößern navbar Suchformular Breite

Question

Dies ist erst das zweite Mal, dass ich stackoverflow benutze, also bitte vergib mir, wenn ich Fehler mache.

Ich habe ein Problem, das die Breite des Standard Bootstrap navbar Suchformulars vergrößert. Ich habe einige der Lösungen ausprobiert, die ich auf Stackoverflow gesehen habe, aber nichts scheint zu funktionieren.

Bitte sehen: http://jsfiddle.net/94zkLh8j/1/

<nav class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" class="read-more" data-target="#bs-example-navbar-collapse-1"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">Vouchipster</a> 
       </div> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <form class="navbar-form navbar-right" role="search"> 
         <div class="form-group"> 
          <div style="display:table;" class="input-group"> 
           <input type="text" class="form-control" placeholder="Search for retailers, categories or products"> 
           <span class="input-group-btn"> 
            <button class="btn btn-green" type="button"><i class="fa fa-search"></i></button> 
           </span> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </nav> 

Answer 1

Sie die Breite des in Ihrem Dokument Sheet input Element festlegen. Verwenden Sie !important, um alle Bootstrap-Breiten zu überschreiben. Ich empfehle das Hinzufügen eines ID in das Formular für die einfache Auswahl in css

Updated Fiddle

HTML

... 
<form class="navbar-form navbar-right" role="search" id="navBarSearchForm"> 
... 

CSS

<style> 
    #navBarSearchForm input[type=text]{width:430px !important;} 
</style>