Perché l'input nascosto sta influenzando il mio layout? LF Spiegazione

Avevo bisogno di usare un input nascosto per trasferire alcuni ID alla pagina per ogni blocco .. qualunque cosa.Perché l'input nascosto sta influenzando il mio layout? LF Spiegazione

Ho il codice seguente:

<div id="shipping_box" class="formSep well"> 
    <div id="default_shipping_box" class="shipping_box row-fluid"> 
     <div class="span1"> 
      <input type="hidden" name="tracking_id" value="" /> 
     </div> 
    </div> 
</div>

Questo codice funzionano bene e il risultato è quello che mi aspettavo.

Se faccio questo:

<div id="shipping_box" class="formSep well"> 
    <div id="default_shipping_box" class="shipping_box row-fluid"> 
     <input type="hidden" name="tracking_id" value="" /> 
     <div class="span1"> 

     </div> 
    </div> 
</div>

Il layout non è rispettata. Vedere questa immagine per la dimostrazione:

enter image description here

Qualcuno può spiegare perché a me? Gli input nascosti non dovrebbero essere "nascosti", quindi non dovrebbero influenzare il layout?

jsfiddle: http://jsfiddle.net/t9M3C/

Vicino linea 285

fonte

2012-08-15 David Bélanger

Puoi creare un [jsfiddle] (http://jsfiddle.net/) che mostra questo in azione? –

@JoshMein Volevo ma non so come mantenere il mio layout e le cose ...? Ecco perché ho caricato una foto. –

Sei sicuro che sia tutto ciò che stai cambiando? "Non dovrebbe" fare la differenza. In che browser stai visualizzando? Hai provato un altro browser per vedere se ha lo stesso effetto? – Gravitate

È perché si dispone di una regola css (nel file bootstrap.min.css) che corrisponde all'elemento firs-child (ma solo se ha una classe * = "span") all'interno del div default_shipping_box.

.row-fluid [class*="span"]:first-child { 
margin-left: 0; 
}

Quindi, se si mette la input nascosto all'interno del div # default_shipping_box e prima della prima campata, che poi regola non sta designando il div.span1 e questo è il motivo per cui il modello è stato afected .

È possibile fissa l'aggiunta di una semplice regola CSS per lo stesso file ...

.row-fluid .span1{margin-left:0 !important;}

L'importante, è perché avete più file che overite questa regola (es. In bootstrap-responsive.min.css)

Buona fortuna, e spero che aiuti applausi, Gmo.-

MODIFICA: XD troppo lento. Ho risposto durante la scrittura ... Sono d'accordo con la ragione spiegata sopra.

fonte

2012-08-15 20:03:55 gmo

editando il mio mentre rispondevi. : D –

sì, ho visto .. e ho modificato il mio, mentre si stava modificando per mettere che aveva già avuto risposta. XDXD; Saluti – gmo

Utilizzando Inspest plugin di Google Chrome, quando si sposta l'ingresso di questa classe:

.row-fluid [class*="span"]:first-child { 
    margin-left: 0; 
}

viene rimosso.

Questo perché in questo:

<div id="shipping_box" class="formSep well"> 
    <div id="default_shipping_box" class="shipping_box row-fluid"> 
     <input type="hidden" name="tracking_id" value="" /> 
     <div class="span1"> 
     </div> 
    </div> 
</div>

questo: <div class="span1"> non è il primo figlio, questo: <input type="hidden" name="tracking_id" value="" /> è.

e nel CSS questo è che la classe predefinita per [class*="span"] è:

[class*="span"] { 
    float: left; 
    margin-left: 30px; 
}

Così utilizzare questo per esempio:

.row-fluid .span1 { 
    margin-left:0 !important; 
}

Spero che questo aiuti.

fonte

2012-08-15 19:42:25

Bootstrap ha qualche CSS che verrà impostato il left-margin della prima del minore di 0, se la classe contiene span:

.row-fluid [class*="span"]:first-child { 
    margin-left: 0; 
    }

Quando l'ingresso nascosto è messo al di sopra del primo span div, quanto sopra margin-left: 0; la proprietà non verrà applicata.

L'immagine seguente mostra che quando l'input nascosto è prima dello, la prima classe span ha un margine sinistro.

Hidden input above DIV

Ciò dimostra che quando l'ingresso nascosto è dopo div, che non v'è alcun margine sinistro.

Hidden below above DIV

EDIT: mi sembra di avere un stato picchiato due volte, mentre mi stavo gli screenshot per illustrare la differenza!

fonte

2012-08-15 20:11:50 jleft

Perché l'input nascosto sta influenzando il mio layout? LF Spiegazione

risposta

Problemi correlati