使用引导程序，将输入文本元素包装在标签中会导致输入文本变为粗体并且不占据整个宽度

Question

我正在尝试用标签包装我的文本输入。我的表单上有一些选择器，将它们包装在标签中使我能够单击标签并激活选择器。但是，当我尝试使用文本框时，它会破坏表单。如果我选择不换行文本框，则标签和文本框之间的间距与换行的元素不同。

这不起作用：

<div class="form-group">
    <label>
        Title:
        <input  type="text" class="form-control" data-bind="value: title" />
    </label>
</div>

这有效：

<div class="form-group">
    <label>
        Date:
        <div class="input-group">
            <input type="text" class="form-control" placeholder="mm/dd/yy" data-provide="datepicker" data-bind="value  :date" id="Date" />
            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
        </div>
    </label>
</div>    

此外，文本输入中的文本不应为粗体。

Answer 1

作为替代方案，不需要包装元素来激活，您可以只使用该for 属性：

<label for="title">Title</label>
<input id="title" type="text" class="form-control" data-bind="value: title" />

如果你不想这样，那么你需要了解层叠样式。