pulsante di avvio per l'inserimento del comando di avvio di twitter appare sul lato sbagliato dell'input quando si trova in una tabella

Question

L'html di seguito funziona bene da solo ma quando viene inserito in una tabella td, il pulsante a discesa viene visualizzato sul lato sinistro dell'input quando deve essere dalla parte giusta Dovrebbe apparire qualcosa di simile all'append con l'esempio di pulsante nella sezione "Estendere i controlli del modulo" di questa pagina: http://twitter.github.com/bootstrap/base-css.html#forms

Entrambe le voci hanno la forma corretta. vale a dire. gli angoli arrotondati ei bordi dritti sono sui lati corretti ma poiché il pulsante si trova sul lato sinistro dell'input, i bordi diritti non si allineano. Sono gli angoli arrotondati che sono uno accanto all'altro. Voglio che vengano visualizzati come nel markup, con l'input affiancato al pulsante a discesa, che sembra essere unito. Anche se provi a usare la classe "input-prepend" (non che lo desideri in questo modo) non cambia.

Nota: sto utilizzando twitter bootstrap in un'applicazione rails tramite l'ultima versione del programma. twitter-bootstrap-rails gioiello.

<div class="btn-group input-append">  
    <input class="span2" id="fruit_selection" name="fruit" />   
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Fruit <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">apple</a></li> 
     <li><a href="#">orange</a></li> 
     <li><a href="#">banana</a></li> 
    </ul> 
</div> 

• l'unica css che ho è quello che è venuto con twitter bootstrap e anche ui jquery.
• è la stessa in Safari e Firefox.
• sua all'interno di modulo tags
• Ho provato tante combinazioni di div, span, classi (append, prepend, btw-group, add-on, control-group etc) a cui riesco a pensare.

Sto sbagliando? C'è qualche css in più che posso aggiungere per farlo funzionare? Qualsiasi aiuto sarebbe apprezzato.

per i punti bonus: Il append e anteporre esempio (http://twitter.github.com/bootstrap/base-css.html#forms) non funziona sul mio sito sia dentro o fuori di una tabella. Posso usare solo uno o l'altro non entrambi allo stesso tempo.

Answer 1

vedo quello che stai cercando di fare ora, si desidera utilizzare un ingresso al posto di un tasto con il gruppo a discesa. Guardando oltre la documentazione del bootstrap ho trovato alcuna soluzione per che l'installazione anche se si può facilmente emulare il proprio copiando il comportamento del pulsante e solo la creazione di una classe per supportare un ingresso con un gruppo a discesa, in questo modo:

CSS

.btn-group .input:first-child { 
    border-bottom-left-radius: 4px; 
    border-top-left-radius: 4px; 
    margin-left: 0; 
} 

.btn-group .input { 
    float: left; 
    position: relative; 
} 

Con questo CSS in atto tutto quello che dovete fare è includere la classe .input nel vostro campo di input e dovrebbe funzionare:

HTML

012.

<div class="btn-group">  
    <input class="span2 input" id="fruit_select" name="fruit" />    
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Fruit <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">apple</a></li> 
     <li><a href="#">orange</a></li> 
     <li><a href="#">banana</a></li> 
    </ul> 
</div> 

Demo, modifica here.

Answer 2

Provare a inserire le liste in un div con classe come gruppo di controllo - un esempio è riportato di seguito. So che hai detto che hai provato a controllare il gruppo, ma dagli un altro colpo. questo codice ha funzionato per me dopo un sacco di tentativi ed errori .. buona fortuna.

<div class="control-group"> 
    <div class="controls"> 
    <ul class="dropdown-menu"> 
     <li><a href="#">apple</a></li> 
     <li><a href="#">orange</a></li> 
     <li><a href="#">banana</a></li> 
    </ul> 
    </div> 
</div>