Zwiększanie szerokości paska wyszukiwania Bootstrap formularz

Question

To już drugi raz, gdy użyłem stackoverflow, więc proszę wybacz mi, jeśli popełnię błędy.

Mam problem zwiększający szerokość domyślnego formularza wyszukiwania paska nawigacyjnego Bootstrap. Próbowałem niektóre z rozwiązań widziałem na stackoverflow, jednak nic nie wydaje się działać.

proszę zobaczyć: 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

Można ustawić szerokość elementu input w arkuszu stylów dokumentu. Użyj !important, aby zastąpić wszystkie szerokości pasm startowych. Polecam dodanie identyfikatora do formularza dla łatwego wyboru w css

Updated Fiddle

HTML

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

CSS

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