¿Por qué la entrada oculta afecta mi diseño? LF Explicación

Necesitaba usar una entrada oculta para transferir algunas identificaciones a la página para cada bloque ... lo que sea.¿Por qué la entrada oculta afecta mi diseño? LF Explicación

Tengo el siguiente código: así el trabajo

<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>

Este código y el resultado es lo que esperaba.

Si hago esto:

<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>

El diseño no es respetado. Ver esta imagen para la demostración:

enter image description here

Puede alguien explicar por qué a mí? La entrada oculta no se debe "ocultar", por lo que no deberían afectar el diseño.

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

línea cerca de 285

Fuente

2012-08-15 David Bélanger

¿Puedes crear un [jsfiddle] (http://jsfiddle.net/) que muestre esto en acción? –

@JoshMein Yo quería pero no sé cómo mantener mi diseño y esas cosas ...? Por eso subí una imagen. –

¿Estás seguro de que eso es todo lo que estás cambiando? "No debería" marcar la diferencia. ¿En qué navegador lo estás viendo? ¿Has probado un navegador diferente para ver si tiene el mismo efecto? – Gravitate

Se debe a que tiene una regla css (en el archivo bootstrap.min.css) que coincide con el primer elemento secundario (pero solo si tiene una clase * = "span") dentro de la etiqueta default_shipping_box div.

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

lo tanto, si usted pone su entrada oculta en el interior deldiv # default_shipping_box y antes del primer tramo, a continuación, esa norma no está labrando el div.span1 y es por eso que su plantilla se ha lado afecto .

Puede fijo la adición de una simple regla CSS para el mismo archivo ...

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

Lo importante, es porque tiene más archivos que overite esta regla (ej. En el arranque-responsive.min.css)

Buena suerte, y espero que ayude vítores, Gmo.-

EDITAR: Demasiado lento XD. Respondido mientras escribo ... Estoy de acuerdo con el motivo explicado anteriormente.

Fuente

2012-08-15 20:03:55 gmo

editando el mío mientras respondiste. : D –

sí, he visto ... y edité el mío, mientras editabas para ponerlo que ya había sido respondido. XDXD; Aclamaciones – gmo

El uso de Google Chrome Inspest Plugin, al mover la entrada de esta clase:

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

consigue quitado.

Esto se debe a que en esta:

<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>

Este: <div class="span1"> no es el primer hijo, esto: <input type="hidden" name="tracking_id" value="" /> es.

y en su CSS esto es que la clase predeterminada para [class*="span"] es:

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

a fin de utilizar esto, por ejemplo:

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

Espero que esto ayude.

Fuente

2012-08-15 19:42:25

Bootstrap tiene un poco de CSS que establecerá el left-margin del primer del niño a 0, si la clase contiene span:

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

Cuando la entrada oculta se pone encima de la primera span div, lo anterior margin-left: 0; propiedad no será aplicada.

La siguiente imagen muestra que cuando la entrada oculta es antes de, la primera clase span tiene un margen izquierdo.

Hidden input above DIV

Esto demuestra que cuando la entrada oculta es después el div, que no hay margen de izquierda.

Hidden below above DIV

EDIT: me parece que tienen un estado golpeado dos veces, mientras me las capturas de pantalla para ilustrar la diferencia!

Fuente

2012-08-15 20:11:50 jleft

¿Por qué la entrada oculta afecta mi diseño? LF Explicación

Respuesta

Cuestiones relacionadas