Formularz Bootstrap: kolumna z etykietą szersza

Question

pytanie dotyczy formularzy Bootstrap na Twitterze. Czy ktokolwiek teraz, jaki jest zalecany sposób, aby uzyskać lewą kolumnę (z etykietami) szerszą niż 140 pikseli? Ważne jest, aby wyglądał dobrze na urządzeniach mobilnych.

Dzięki za rekomendacje.

Answer 1

Próbowałem na kilka sposobów. Również do dodawania stylów w pliku html, który wyglądał dobrze na komputerze, ale nie na urządzeniach mobilnych.

Rozwiązaniem jest zmiana bootstrap.css (choć nie jestem pewien, czy ten plik jest odnie być zmienione):

.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

Nie zapomnij edytować

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

jak również w forms.less

To powinno być ustawione jako zmienna, tak myślę.

I zostały zmodyfikowane, że dla mnie jako takiego w forms.less (dwie nowe zmienne są ustawione w variables.less wtedy):

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

W Bootstrap V2.1.1, szerokość .control-label jest zdefiniowany w forms.less tak:

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

można zastąpić @horizontalComponentOffset definicji zmiennej w czasie krótszym kodzie projektu po zaimportowaniu bootstrap na variables.less. Jeśli potrzebujesz tego dla konkretnej strony, zrób to na stronie MNIEJ. W przeciwnym razie dodaj wspólny plik, lub jeszcze lepiej, własny plik variables.less, który ma zastąpić wstępnie zdefiniowane zmienne programu Bootstrap.

Jeśli chodzi o urządzenia przenośne, można użyć numeru media queries, aby w razie potrzeby podać inną wartość @horizontalComponentOffset dla urządzeń mobilnych.