la domanda riguarda i moduli di Bootstrap di Twitter. Qualcuno ora qual è il modo consigliato per ottenere la colonna di sinistra (con le etichette) più larga di 140px? È importante che abbia un bell'aspetto anche sui dispositivi mobili.Modulo Bootstrap di Twitter: crea una colonna di etichette più ampia
Grazie per i consigli.
Ho provato diversi modi. Anche per aggiungere stili all'interno del file html, che sembrava buono sul desktop, ma non sui dispositivi mobili.
La soluzione è quella di cambiare il bootstrap.css (anche se non sono sicuro se questo file viene intented essere cambiato):
.form-horizontal .control-label {
float: left;
/*original: width: 140px;*/
width: 200px;
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
/*original: margin-left: 160px;*/
margin-left: 220px;
}
Non dimenticare di modificare
.form-actions {
padding-left: 160px;
}
pure in forms.less
Questo dovrebbe essere impostato come variabile, penso.
Ho modificato questo per me come tale nel forms.less (le due nuove variabili sono impostate in variables.less poi):
// Horizontal-specific styles
// --------------------------
.form-horizontal {
// Increase spacing between groups
.control-group {
margin-bottom: @baseLineHeight;
.clearfix();
}
// Float the labels left
.control-label {
float: left;
// ub was 140px
width: @labelWidth;
padding-top: 5px;
text-align: right;
}
// Move over all input controls and content
.controls {
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
// don't inherit the margin of the parent, in this case .controls
*display: inline-block;
// ub was 20px
*padding-left: @labelPadding;
// ub was 160px
margin-left: @labelWidth + @labelPadding;
*margin-left: 0;
&:first-child {
// ub was 160px
*padding-left: @labelWidth + @labelPadding;
}
}
// Remove bottom margin on block level help text since that's accounted for on .control-group
.help-block {
margin-top: @baseLineHeight/2;
margin-bottom: 0;
}
// Move over buttons in .form-actions to align with .controls
.form-actions {
// ub was 160px
padding-left: @labelWidth + @labelPadding;
}
}
Non modificare mai i file della libreria, poiché rende molto difficili l'aggiornamento e la manutenzione. -1 per questa risposta. – Mtz
Questa risposta era correlata alla risposta seguente (che ha violato la larghezza del pixel) e contiene un miglioramento per il bootstrap, poiché modificava gli elementi fissi in una variabile. La modifica che ho proposto qui è ora implementata con @horizontalComponentOffset nella versione di bootstrap corrente. – Urs
Ho downvoted l'altra risposta per lo stesso motivo, non preoccuparti. Mantengo il mio punto. Se si desidera migliorare l'altra risposta, è possibile averla modificata o commentata. – Mtz
In Bootstrap v2.1.1, la larghezza .control-label è definito in forms.less come questo:
.form-horizontal
{
.control-label
{
width: @horizontalComponentOffset - 20;
}
}
Si potrebbe sovrascrivere la @horizontalComponentOffset definizione delle variabili nel codice meno del progetto dopo l'importazione di bootstrap di variables.less. Se ti serve per una pagina specifica, fallo in MENO in quella pagina. Altrimenti, aggiungilo come importazione comune, o meglio ancora, il tuo file variables.less che ha l'intenzione di sovrascrivere le variabili predefinite di Bootstrap.
Per quanto riguarda il cellulare, è possibile utilizzare media queries per fornire un valore diverso @horizontalComponentOffset per i dispositivi mobili, se necessario.
Modifica della libreria Il file CSS non è quasi mai una buona idea, poiché rende l'aggiornamento e la manutenzione un incubo. –
+1 Michael Moussa, -1 per la risposta del poster. – Mtz
È tuttavia possibile creare il proprio file css che sovrascrive questi valori. – AlexLordThorsen