Question

我有

<div class="form-group">
    <label class="control-label">
        Last name
        <input style="font-weight: normal;" required maxlength="50" type="text" class="form-control" name="lastName">
    </label>
</div>

Firefox中的输入宽度为210px，Chrome中的输入宽度为177px，但在检查元素后，我无法在css中找到常量。标签＆＃34;姓氏＆＃34;比210px薄得多。如果我将标签更改为非常长的字符串，则输入的宽度将相应调整（100％）。但是，我正在寻找定义最小宽度的位置。我正在使用这个标记，因此我不需要为标签赋予一个等于其输入id的属性。我可以很容易地明确设置宽度，但我只是好奇这个值的来源。如果这些是浏览器样式，那么我该如何查看它们呢？

Answer 1

好input.form-control设置为100%，这意味着它的父母是100％。在这种情况下，这是标签控件。

默认标签宽度的差异可能是由于每个browser's default stylesheet

的差异

如果您希望输入占据整个宽度，但又不想输入长标签，则可以设置：

.form-group > label { width: 100%; }

bootstrap 3.2.0标签宽度的嵌套输入

1 个答案:

Demo in jsFiddle