css - 表单组内的 Bootstrap 3 输入宽度和标签大小

Question

您好，我正在使用 Bootstrap 3，当我遇到调整用户输入大小的问题时，我从这个 question 得到了帮助shadowf 的回答帮助了我。

现在我遇到了另一个问题。该修复程序确实调整了输入的大小，但对表单组内的标签和控件应用了相同的大小，因为在该级别应用了该类。

我需要为标签和输入框应用不同的尺寸。如果我在标签或输入级别应用大小调整类，表单对齐方式就会出现问题。

我不想使用水平或内嵌形式。

<div class="form-group col-xs-6"> 
<label for="exampleInputEmail1">Really long label which I want to have separate sizing</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

修改后的 fiddle here

Answer 1

似乎您需要拆分文本标签和输入框之间的行。然后你可以让文本遵循整个 12 网格系统，而输入只使用系统中的 6 个 block :

<div class="form-group">
  <div class="row">
    <div class="col-xs-12">
      <label for="exampleInputEmail1">Really long label which I want to have separate sizing</label>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
  </div>
</div>

JSFiddle .我没有对密码字段做任何事情，但你明白了。祝你好运!