如何在Bootstrap 3中以一种形式混合垂直和水平表单元素？

Question

我正在尝试创建一个混合水平和垂直元素的表单.我设法做到了它看起来不错: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>

但正如你所看到的,我正在使用3种不同的形式!我只需要一个表单(通过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做到这一点？
• 如果不是如何使用自定义类？(老实说,我尝试了两种不同的解决方案,但没有用)
• 或者,是否可以同时通过AJAX发送几种表格？

Answer 1

您不必form-horizontal在<form>元素上使用-class .而是使用a <div>并将所有字段包装在<form>这样的字段中:http://www.bootply.com/hxs0IhA1wV