Twitter Bootstrap cambia il rendering della legenda fieldset, perché?

In questo progetto ASP.NET MVC 3, ho appena iniziato a sperimentare con Twitter Bootstrap, ma noto che non funziona con il rendering delle leggende <fieldset>. Cosa sta facendo il rendering della legenda qui, e come posso tornare alla normalità? Cioè, voglio che la linea giusta sia allineata verticalmente con la linea sinistra di nuovo.Twitter Bootstrap cambia il rendering della legenda fieldset, perché?

La resa leggenda di serie, il rendering pre-Bootstrap, a sinistra, Bootstrap colpite a destra:

Normal legend Twitter Bootstrap legend

Aggiornamento: Ho scoperto che cosa sta causando il rendering rotto , almeno: Bootstrap modifica la proprietà della larghezza della legenda al 100% e la proprietà border-bottom a "1px solid". Questo fa sì che il bordo originale a destra della legenda venga cancellato e un bordo sotto di esso appaia invece. La domanda è come questo è destinato a funzionare. Forse il CSS di MVC (Site.css) interferisce con quello di Bootstrap?

fonte

2012-07-13 aknuds1

questo potrebbe essere un problema di larghezza. Prova a cambiare la lunghezza del testo, la larghezza della 'legenda' o del padding. Solo una prima ipotesi indovina – Eonasdan

Qual è il css in arrivo per la tua leggenda? Ho solo un margine inferiore: 1px sul mio? – Jeemusu

Vedo che Bootstrap aggiunge tra le altre cose una 'width: 100%' e una 'border-bottom: 1px solid', che causa questo comportamento. La prima proprietà fa sparire la linea originale a destra, mentre la seconda fa apparire la linea sotto la legenda. Non sei sicuro di ciò che Bootstrap sta cercando di fare qui. – aknuds1

Se si passa le dichiarazioni fogli di stile in modo che il bootstrap è l'ultima che dovrebbe risolvere il problema, vale a dire:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />

stili Bootstrap

fieldset { 
    padding: 0; 
    margin: 0; 
    border: 0; 
} 

legend { 
    display: block; 
    width: 100%; 
    padding: 0; 
    margin-bottom: 27px; 
    font-size: 19.5px; 
    line-height: 36px; 
    color: #333; 
    border: 0; 
    border-bottom: 1px solid #E5E5E5; 
}

predefinite stili MVC style.css

fieldset { 
    border: 1px solid #DDD; 
    padding: 0 1.4em 1.4em 1.4em; 
    margin: 0 0 1.5em 0; 
} 

legend { 
    font-size: 1.2em; 
    font-weight: bold; 
}

risultato

fine dovrebbe essere simile:

enter image description here

vs il contrario (MVC stili predefiniti dichiarati scorso)

enter image description here

In alternativa, sbarazzarsi del foglio di stile MVC del tutto e utilizzare bootstrap insieme a qualsiasi stile personalizzato di cui hai bisogno.

fonte

2012-07-13 18:54:17 MikeM

Twitter Bootstrap cambia il rendering della legenda fieldset, perché?

risposta

Problemi correlati