Aumento della larghezza del modulo di ricerca navst Bootstrap

Question

Questa è solo la seconda volta che ho usato lo stackoverflow quindi ti prego di perdonarmi se commetto errori.

Sto riscontrando un problema che aumenta la larghezza del modulo di ricerca della barra di navigazione Bootstrap predefinito. Ho provato alcune delle soluzioni che ho visto su StackOverflow, tuttavia niente sembra funzionare.

consultare: 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

È possibile impostare la larghezza dell'elemento input nel documento foglio di stile. Utilizzare !important per sovrascrivere qualsiasi larghezza di bootstrap. Mi consiglia di aggiungere un id al modulo per una facile selezione 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>