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

Posted 2023-03-06

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

【英文标题】：How to mix vertical and horizontal form elements in one form in Bootstrap 3?

【发布时间】：2014-09-11 23:38:02

【问题描述】：

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

【问题讨论】：

提供控件的 ID，然后将值添加到 AJAX 调用，而不是尝试使用表单。

很想知道为什么我被否决了！这个问题有明确的答案（看Henri的），我把所有需要的源代码放在这里，我也做了很多研究才发在这里！

人们很快就会投反对票。

看起来这是一个潜在的重复项，尽管尚不清楚上一个问题中的 Bootstrap 版本。我继续回答 Bootstrap 3 的答案，将示例代码放在答案中。 ***.com/questions/13596253/…

【参考方案1】：

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

【讨论】：

既然你这么快，我只能在5分钟内接受你的回答！谢谢！