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> - 类。而是使用<div>并将<form>内的所有字段包装成如下：http://www.bootply.com/hxs0IhA1wV

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

1 个答案: