Biểu mẫu bình thường (dọc) bên trong mẫu ngang với Twitter Bootstrap

Question

Tôi muốn có một biểu mẫu có bố cục nằm ngang ở cấp đầu tiên, nhưng sau đó trong một hàng có thể có dạng "nội dòng" mà tôi muốn có bố cục dọc (mặc định). Có cách nào dễ dàng để đạt được điều này?

Lưu ý:.form-inline không làm những gì tôi đang tìm kiếm, vì nó không đặt nhãn bên trong trên đầu vào.

Cho đến nay tôi có một cái gì đó như thế này:

<div class="form-horizontal"> 
    <div class="control-group"> 
     <label class="control-label"> 
      outer label 
     </label> 
     <div class="controls ### SOMETHING TO CLEAR/OVERRIDE form-horizontal ###"> 
      ### INLINE FORM WITH SAME STRUCTURE IS HERE ### 
     </div> 
    </div> 
</div> 

Answer 1

Boostrap không thể làm điều này theo mặc định, nhưng tôi đã bao gồm trong này ngã ba của tôi https://github.com/jasny/bootstrap/blob/master/less/jasny-forms.less#L40

Hãy xem xét sử dụng phần mở rộng Jasny để Bootstrap http://jasny.github.com/bootstrap

hoặc chỉ sử dụng CSS này

.form-vertical .form-horizontal .control-group > label { 
    text-align: left; 
} 
.form-horizontal .form-vertical .control-group > label { 
    float: none; 
    padding-top: 0; 
    text-align: left; 
} 
.form-horizontal .form-vertical .controls { 
    margin-left: 0; 
} 
.form-horizontal .form-vertical.form-actions, 
.form-horizontal .form-vertical .form-actions { 
    padding-left: 20px; 
} 
.control-group .control-group { 
    margin-bottom: 0; 
} 

Với HTML

<form class="form-horizonal"> 
    # Horizal controls here 

    <div class="form-vertical"> 
     <div class="control-group"> 
      <label class="control-label">Label</label> 
      <div class="controls">Something here</div> 
     </div> 
    </div> 
</form> 

Answer 2

Tôi không chắc chắn chính xác những gì bạn đang tìm kiếm nhưng tôi đã cố gắng đoán.

Tôi đã tạo biểu mẫu có hai đường thẳng đứng dòng thứ hai với nhiều phần tử biểu mẫu.

Tôi đã sử dụng khối nội tuyến để thực hiện việc này.

http://jsbin.com/icoduh/1/edit

Answer 3

Đây là @ jasny-arnold-daniels CSS được cập nhật cho Boostrap 3. Trong 3 hình thức nhóm thay thế kiểm soát nhóm, hình thức kiểm soát thay thế kiểm soát. Cũng cần thay đổi chiều rộng của @ user9645. CSS mới là:

.form-vertical .form-horizontal .form-group > label { 
    text-align: left; 
} 
.form-horizontal .form-vertical .form-group > label { 
    float: none; 
    padding-top: 0; 
    text-align: left; 
    width: 100% 
} 
.form-horizontal .form-vertical .form-control { 
    margin-left: 0; 
} 
.form-horizontal .form-vertical.form-actions, 
.form-horizontal .form-vertical .form-actions { 
    padding-left: 20px; 
} 
.form-group .form-group { 
    margin-bottom: 0; 
} 

Answer 4

Bạn không cần phải viết tùy chỉnh CSS cho Bootstrap 3. Thay vì đưa lớp học của bạn của form-ngang trên thẻ hình thức, chỉ đặt một div wrapper với lớp xung quanh các hình thức các phần tử mà bạn muốn nằm ngang (và hỗ trợ các lớp kích thước cột cho các mục nằm ngang).

Ví dụ, điều này sẽ làm việc:

<form> 
    <div class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-sm-2 control-label">I'm a horizontal form element</label> 
     <div class="col-sm-10"> 
     <input type="text" class="form-control"> 
     </div> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label>I'm a vertical form element</label> 
    <input type="text" class="form-control"> 
    </div> 
</form> 

này hoạt động vì hình thức thẳng đứng được tự động sử dụng cho một hình thức không có lớp tuyên bố một cách rõ ràng. Đó là 'thiếu một lớp' có thể được nhìn thấy trong các tài liệu here.