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

Question

我试图强迫它<label/>和它<input/>保持同一条线.

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

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

我要这个:

搜索[______________________]

我明白了:

搜索

[_____________________]

我如何强迫他们留在同一条线上？

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

Answer 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行为就像一行,所以你可以将内容移动到单独的行:)使用它,你需要使用网格属性,以便标签/输入正确对齐.