Twitter Bootstrap-Formular: Make Label Spalte breiter

Question

die Frage ist über Twitter Bootstrap Formen. Hat jemand jetzt was ist der empfohlene Weg, um die linke Spalte (mit den Etiketten) breiter als 140px zu bekommen? Es ist wichtig, dass es auch auf mobilen Geräten gut aussieht.

Vielen Dank für Ihre Empfehlungen.

Answer 1

Ich habe mehrere Möglichkeiten ausprobiert. Auch zum Hinzufügen von Stilen innerhalb der HTML-Datei, die auf dem Desktop, aber nicht auf mobilen Geräten gut aussah.

Die Lösung ist die bootstrap.css zu ändern (obwohl ich nicht sicher bin, ob diese Datei geändert werden soll, wird intented):

.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; 
} 

Answer 2

Vergessen Sie nicht,

.form-actions { 
    padding-left: 160px; 
} 

zu bearbeiten auch in forms.less

Dies sollte als eine Variable eingestellt werden, denke ich.

Ich habe geändert, dass für mich als solche in forms.less (die beiden neuen Variablen in variables.less gesetzt werden dann):

// 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; 
    } 
} 

Answer 3

In Bootstrap v2.1.1, die .control-label Breite definiert ist, in forms.less wie folgt aus:

.form-horizontal 
{ 
    .control-label 
    { 
     width: @horizontalComponentOffset - 20; 
    } 
} 

Sie könnten die @horizontalComponentOffset Variablendefinition in Ihrem Projekt weniger Code unterbrechen, nachdem variables.less Bootstrap des importieren. Wenn Sie dies für eine bestimmte Seite benötigen, tun Sie es auf der Seite WENIGER. Andernfalls fügen Sie einen allgemeinen Import hinzu, oder besser noch Ihre eigene Datei variables.less, die die vordefinierten Variablen von Bootstrap überschreiben soll.

Soweit mobil, können Sie media queries verwenden, um bei Bedarf einen anderen @horizontalComponentOffset Wert für mobile Geräte anzugeben.