Làm thế nào để trộn các phần tử biểu mẫu dọc và ngang trong một biểu mẫu trong Bootstrap 3?

Question

Tôi đang cố tạo biểu mẫu kết hợp các phần tử ngang và dọc. Tôi đã cố gắng làm điều đó và có vẻ đẹp: http://www.bootply.com/rOibTngOct (bạn có thể xem kết quả trên bootply nhưng tôi sẽ đặt mã ở đây cũng)

<div class="col-md-4 col-md-offset-4"> 
    <form role="form"> 
    <div class="form-group"> 
     <label for="name">Name</label> 
     <input class="form-control" type="text"> 
    </div> 
    </form> 
    <form class="form-horizontal" role="form"> 
    <div class="form-group"> 
     <label class="col-xs-9 control-label">Choice that you prefer</label> 
     <div class="col-xs-3"> 
     <select class="form-control select"> 
      <option>A</option> 
      <option>B</option> 
     </select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-xs-5 control-label">Another choice</label> 
     <div class="col-xs-7"> 
     <select class="form-control select"> 
      <option>very long choice C</option> 
      <option>very long choice D</option> 
     </select> 
     </div> 
    </div> 
    </form> 
    <form role="form"> 
    <div class="form-group"> 
     <label for="name">Address</label> 
     <input class="form-control" type="text"> 
    </div> 
    </form> 
</div> 

Nhưng như bạn có thể thấy tôi đang phải dùng đến 3 hình thức khác nhau! Tôi chỉ cần có một biểu mẫu (gửi qua AJAX tới máy chủ)

Tôi cần trợ giúp! Tôi đã thử điều này: http://www.bootply.com/pCCodAQaKN

<div class="col-md-4 col-md-offset-4"> 
    <form role="form"> 
    <div class="form-group"> 
     <label for="name">Name</label> 
     <input class="form-control" type="text"> 
    </div> 
    <div class="form-group"> 
     <label class="col-xs-9 control-label">Choice that you prefer</label> 
     <div class="col-xs-3"> 
     <select class="form-control select"> 
      <option>A</option> 
      <option>B</option> 
     </select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-xs-5 control-label">Another choice</label> 
     <div class="col-xs-7"> 
     <select class="form-control select"> 
      <option>very long choice C</option> 
      <option>very long choice D</option> 
     </select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="name">Address</label> 
     <input class="form-control" type="text"> 
    </div> 
    </form> 
</div> 

Và nó trông rất đáng sợ. Vì vậy, câu hỏi của tôi là:

• Có cách nào để thực hiện điều này với bootstrap chuẩn 3 không?
• Nếu không làm thế nào để làm điều đó với các lớp học tùy chỉnh? (Tôi thành thật đã thử 2 giải pháp khác nhau nhưng không có kết quả)
• Hoặc, có thể gửi qua một số biểu mẫu AJAX cùng một lúc không?

Answer 1

Bạn không phải sử dụng form-horizontal-class trên phần tử <form>. Thay vào đó, hãy sử dụng <div> và bọc tất cả các trường bên trong một <form> như sau: http://www.bootply.com/hxs0IhA1wV