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

【问题标题】：Bootstrap 3 input width and lable sizing inside form-group表单组内的 Bootstrap 3 输入宽度和标签大小
【发布时间】：2016-07-14 21:56:15
【问题描述】：

您好，我正在使用 Bootstrap 3，当我遇到调整用户输入的问题时，我从这个 questionshadowf 答案中得到了帮助。

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

我需要为标签和输入框应用不同的大小。如果我在标签或输入级别应用大小调整类，则表单对齐会折腾。

我不想使用水平或内联表单。

<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>

修改过的小提琴here

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

<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。我没有对密码字段做任何事情，但你明白了。祝你好运！

【讨论】：