Come allineare radio in linea/caselle di controllo e blocchi di aiuto in forma orizzontale con Bootstrap 3 di Twitter

Question

Pochi giorni fa Twitter Bootstrap 3 RC1 released e ho appena iniziato a giocare con esso su un progetto personale.

Ho una forma orizzontale che comprende alcuni gruppi linea radio di caselle ma allineamento orizzontale di questi elementi non sono uguali:

Domanda 1: Perché Chrome non visualizza elemento aiuto-blocco la stessa linea con l'etichetta?

Domanda 2: Come allineare il gruppo radio in linea sulla stessa riga con l'etichetta?

Domanda 3: Il seguente codice è valido? Questi problemi sono legati al markup?

Markup:

<div class="container"> 
    <form class="form-horizontal"> 

    <div class="form-group"> 
    <label class="col-lg-2 control-label">Weight</label> 
    <div class="col-lg-1"> 
     <input type="text" name="weight" class="form-control" value="20"> 
    </div> 
    <div class="help-block"> grams</div> 
    </div> 

    <div class="form-group"> 
    <label class="col-lg-2 control-label">Full part name</label> 
    <div class="col-lg-6"> 
     <input type="text" name="name" class="form-control" placeholder="Don't use numeric characters.."> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label class="col-lg-2 control-label">Inline radios</label> 
    <div class="col-lg-10"> 
     <label class="radio-inline"> 
     <input type="radio" name="radio"> Hello 
     </label> 
     <label class="radio-inline"> 
     <input type="radio" name="radio"> Other 
     </label> 
     <label class="radio-inline"> 
     <input type="radio" name="radio"> Another 
     </label> 
     <label class="radio-inline"> 
     <input type="radio" name="radio" checked="checked"> Foobar 
     </label> 
    </div> 
    </div> 
</form> 
</div> 

EDIT:

Anche questa marcatura su un piccolo schermo produce un "caduto elemento di aiuto-blocco". Penso che il mio markup sia problematico, ma non ho idea di cosa sia sbagliato.

Answer 1

tuo markup sembra essere valida a prima vista. A proposito di tua domanda 1.

È stato impostato l'immissione con:

<div class="col-lg-1"> 
    <input type="text" name="weight" class="form-control" value="20"> 
</div> 

Quindi, per la larghezza è impostata con l'1-col-lg prefisso, vedi anche: https://stackoverflow.com/a/17920693/1596547. stack "col-lg-1" sotto 992 pixel. Quando la larghezza dello schermo è> 992 px. Il div ha ottenuto una larghezza dell'8,333% (100/12). La classe di controllo form imposta la larghezza della variabile di input al 100%. Sotto il 992px non esiste una definizione per "col-lg-1", causa la larghezza del 100% dell'input, l'input è visualizzato con una larghezza del 100%.

tenta di utilizzare i prefissi colleghi * che mai pile (o utilizzare altri CSS per impostare la larghezza)

non ho trovato un comportamento diverso per Chrome a tutti. Sopra il 992px lo troverò su FF e Chrome:

Non ho ancora trovato una soluzione per la tua seconda domanda.

Domanda 2: Le etichette ottenuto un padding-top di 9px da:

.form-horizontal .control-label { 
    padding-top: 9px; 
    } 

il .radio-inline non hanno alcuna imbottitura, in modo da aggiungere il codice qui sotto al tuo css:

.radio-inline, .checkbox-inline { 
    padding-top: 9px; 
} 

Vedi: https://github.com/twbs/bootstrap/pull/8967