2013-04-29 11 views
12

Ho questa casella di ricerca:Una casella di ricerca in Twitter Bootstrap

enter image description here

E il codice della casella di ricerca è:

<form method = "post" action="search.php" class = "pull-down navbar-search"> 
    <div class="input-append"> 
     <input class="search-query input-medium" name="search_query" type="text" placeholder="Arama Yap" > 
     <button type = "submit "class="btn btn-large" type="button"><i class="icon-search"></i></button> 
    </div> 
</form> 

voglio la casella di ricerca di non avere spazio tra la scatola e il pulsante. Come posso realizzarlo? Grazie.

risposta

18

Scorri verso il basso questo link al bit che dice "Cerca modulo";

http://twitter.github.io/bootstrap/base-css.html#forms

Ecco un violino che mostra che funziona: http://jsfiddle.net/3PgU2/

<form class="form-search"> 
    <div class="input-append"> 
     <input type="text" class="span2 search-query"> 
     <button type="submit" class="btn">Search</button> 
    </div> 
    <div class="input-prepend"> 
     <button type="submit" class="btn">Search</button> 
     <input type="text" class="span2 search-query"> 
    </div> 
</form> 
+0

Ho letto quel link e il fatto i cambiamenti, ma nulla è cambiato visivamente. Qui è la forma attuale del codice: \t \t \t '

\t \t \t
\t \t \t \t \t \t \t \t \t \t
\t \t \t
' – jason

+0

ho aggiunto un violino con una demo funzionante nella mia risposta. Copialo e dovresti essere bravo ad andare. –

+0

La differenza è nelle classi - modulo-ricerca che stai utilizzando attualmente, e nella ricerca navbar che stavi utilizzando in precedenza – TechnoBlahble