7

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

它看起来很糟糕。所以我的问题是：

  • 有没有办法用标准引导程序 3 做到这一点？
  • 如果不是如何使用自定义类来做到这一点？（老实说，我尝试了 2 种不同的解决方案，但无济于事）
  • 或者，是否可以同时通过 AJAX 发送多个表单？
4

1 回答 1

12

您不必在元素上使用form-horizontal-class 。<form>而是使用 a<div>并将所有字段包装在一个中，<form>如下所示：http: //www.bootply.com/hxs0IhA1wV

于 2014-07-21T12:56:22.697 回答