调整自举输入大小但保留标签位置/大小

Question

有没有办法让输入文本框变小（比如col-sm-1），但保留它的标签为＆＃34;全长＆＃34; ？

我在SO上看到的所有示例都显示用这样的div包装标签和输入：

<div class="form-group row">
  <div class="col-xs-2">
      <label for="code">Short field but i have a reeally long title that I want on one line</label>
      <input type="text" class="form-control"/>
    </div>
</div>

哪个好，但是标签也包含在这个div中：

如果我从label中取出div：

<div class="form-group row">
    <label for="code">Short field but i have a reeally long title that I want on one line</label>
    <div class="col-xs-2">
        <input type="text" class="form-control" />
    </div>
</div>

标签很好，但与输入右侧对齐！

我创造了一个小提示来展示我的意思： http://jsfiddle.net/alexjamesbrown/42j2rz32/

Answer 1

如何为输入和标签使用单独的行：

<div class="form-group">
  <div class="row">
    <div class="col-xs-12">
      <label for="code">Short field but i have a reeally long title that I want on one line</label>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <input type="text" class="form-control"/>
    </div>
  </div>
</div>

这是一个bootply：http://www.bootply.com/EcQtj8LqFy

Answer 2

尝试：

<div class="form-group row">
    <div class="col-xs-6">
        <label for="code">Short field but i have a reeally long title that I want on one line</label>
      </div>
      <div class="col-xs-2">
        <input type="text" class="form-control"/>
      </div>
  </div>

Answer 3

您可以将它们分开添加到不同的行中。

<div class="row">
    <div class="col-xs-12">
        <label for="code">
            Short field but i have a reeally long title that I want on one line
        </label>
    </div>
</div>
<div class="row">
    <div class="col-xs-2">
        <input type="text" class="form-control" />
    </div>
</div>