使用引导程序，在标签中包装输入文本元素会使输入文本变为粗体而不占用全宽

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

您想更新自己的css，将标签更改为显示为块，或将其宽度设置为100％。然后，您还希望将标签内的输入设置为正常的字体权重。

label {
    display:block;
}
label input {
    font-weight:normal
}

https://jsfiddle.net/partypete25/95ygubwx/

Answer 2

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

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

如果你不想要这个，那么你需要了解级联风格。

Answer 3

您不需要在标签内包装输入。 标签元素的 属性正在执行您想要实现的相同操作。在bootstrap is中创建表单控件的正确方法：

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

为什么输入不采用全角和文本为粗体：以下是bootstrap库应用的标签css。

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

在你的情况下，如果你在input中包装输入，input就会从它的父（label）继承 font-weight：700 px; ，因此是粗体。

父母标签 max-width：100％限制了输入宽度。如果它可能宽度：100％，则输入将采用全宽。最大宽度和宽度之间存在差异。