如何使用 Bootstrap 表单控件类强制输入与其标签保持在同一行？答案

【问题标题】：How do I force an input to stay on the same line as its label with Bootstrap form-control class?如何使用 Bootstrap 表单控件类强制输入与其标签保持在同一行？
【发布时间】：2014-11-05 21:06:36
【问题描述】：

我试图强制 <label/> 和它的 <input/> 保持在同一行。

我正在使用表单控制类来使<input/> 漂亮。然而，当我这样做时，它真的想把自己放在一个单独的线上。我避免使用行和列，因为我希望标签就在文本框旁边，而不是根据屏幕大小移动。

  <div>
    <label class="form-label">Search</label>
    <input type="text" class="form-control">
  </div>

我想要这个：

搜索 [______________________]

我明白了：

搜索

[_____________________]

如何强制他们保持在同一条线上？

http://embed.plnkr.co/qA2s5RGRpvfRa7rhiq1n/preview

【问题讨论】：

标签： forms twitter-bootstrap alignment

【解决方案1】：

Bootstrap 将您要查找的内容称为内联表单或水平表单。

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="form-label">Search</label>
    <input type="text" class="form-control">
  </div>
 </form>

确保您的表单上有form-inline 类，并且实际上它们应该包含在form-group 中。内联表单将所有内容放在一行中。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Search</label>
     <div class="col-sm-10">
       <input type="text" class="form-control">
    </div>
  </div>
 </form>

当使用form-horizontal 时，form-group 就像一行，因此您可以将内容移动到单独的行:) 这样，您需要使用网格属性，以便标签/输入正确对齐。

【讨论】：