html - bootstrap 3.2.0 标签宽度的嵌套输入

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 中找到常量。标签“Last name”比 210px 细得多。如果我将标签更改为很长的字符串，输入的宽度将相应调整(100%)。但是，我正在寻找定义最小宽度的位置。我正在使用这个标记，这样我就不需要为标签提供一个等于其输入 ID 的属性。我可以很容易地明确设置宽度，但我只是好奇这个值是从哪里来的。如果这些是浏览器样式，那么我如何查看它们？

Answer 1

input.form-control 设置为 100%，这意味着 100% 的父级。在本例中，这是标签控件。

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

如果你希望输入占满整个宽度，但又不想输入很长的标签，你可以设置:

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

Demo in jsFiddle