Biểu mẫu Khởi động Twitter: Tạo cột nhãn rộng hơn

Question

câu hỏi là về các biểu mẫu Khởi động Twitter. Có ai bây giờ cách được đề nghị để có được cột bên trái (với các nhãn) rộng hơn 140px? Điều quan trọng là nó cũng có vẻ tốt trên các thiết bị di động.

Cảm ơn các đề xuất của bạn.

Answer 1

Tôi đã thử một số cách. Ngoài ra, để thêm các kiểu trong tệp html, trông đẹp mắt trên máy tính để bàn, chứ không phải trên các thiết bị di động.

Giải pháp là thay đổi bootstrap.css (mặc dù tôi không chắc chắn cho dù tập tin này là intented phải được thay đổi):

.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

Đừng quên để chỉnh sửa

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

cũng như trong forms.less

Điều này nên được đặt là một biến, tôi nghĩ vậy.

Tôi đã sửa đổi đó đối với tôi như vậy trong forms.less (hai biến mới được thiết lập trong variables.less sau đó):

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

Trong Bootstrap v2.1.1, chiều rộng .control-label được định nghĩa trong forms.less như thế này:

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

bạn có thể ghi đè lên các định nghĩa biến @horizontalComponentOffset trong mã LESS của dự án của bạn sau khi nhập bootstrap của variables.less. Nếu bạn cần điều này cho một trang cụ thể, hãy làm điều đó trong LESS của trang đó. Nếu không, hãy thêm nó một cách nhập phổ biến, hoặc tốt hơn, tệp variables.less của riêng bạn nhằm ghi đè các biến được xác định trước của Bootstrap.

Khi di động đi, bạn có thể sử dụng media queries để cung cấp giá trị @horizontalComponentOffset khác cho thiết bị di động, nếu cần.