Как смешать вертикальные и горизонтальные элементы формы в одной форме в Bootstrap 3?

Я пытаюсь создать форму, которая смешивает горизонтальные и вертикальные элементы. Мне удалось это сделать, и это выглядит красиво: http://www.bootply.com/rOibTngOct (Вы можете увидеть результат на bootply, но я также помещу код здесь)

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

Но, как вы можете видеть, я прибегаю к трем различным формам! Мне нужно иметь только одну форму (чтобы отправить ее через AJAX на сервер)

Мне нужна помощь! Я попробовал это: 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>

И это выглядит ужасно. Итак, мои вопросы таковы:

Есть ли способ сделать это с помощью стандартного bootstrap 3?
• если нет, то как это сделать с пользовательскими классами? (Я честно попробовал 2 разных решения, но безрезультатно)
• или, возможно ли отправить через AJAX несколько форм одновременно?