Jak połączyć pionowe i poziome elementy formularza w jednej formie w Bootstrap 3?

Question

Próbuję utworzyć formularz, który łączy elementy poziome i pionowe. Udało mi się to zrobić i ładnie wygląda: http://www.bootply.com/rOibTngOct (można zobaczyć wynik na bootply ale będę umieścić kod tutaj również)

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

Ale jak widać jestem uciekania się do 3 różnych formach! Potrzebuję tylko jednego formularza (aby przesłać go przez AJAX do serwera)

Potrzebuję pomocy! Próbowałem tego: 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> 

I wygląda okropnie. Więc moje pytania są następujące:

• Czy istnieje sposób, aby to zrobić ze standardowym bootstrap 3?
• Jeśli nie, jak to zrobić z klasami niestandardowymi? (Szczerze wypróbowałem 2 różne rozwiązania, ale bezskutecznie)
• Czy możliwe jest wysyłanie za pośrednictwem AJAX kilku formularzy jednocześnie?

Answer 1

Nie trzeba używać klasy form-horizontal na elemencie <form>. Zamiast tego należy użyć <div> i zawinąć wszystkie pola wewnątrz jednego <form> w następujący sposób: http://www.bootply.com/hxs0IhA1wV