Boostrap无法在表单组内对齐表单组输入

Question

这是一张正在发生的事情的图片：

​

​

我不明白为什么表单组在class=“col sm-7”的div中，为什么表单组比它所在的div容器伸展得更远？它是如何解决这个问题的？

<div class="form-group">
    @Html.LabelFor(m => m.StartDate, new { @class = "col-md-3 col-sm-3 control-label" })
    <div class="col-md-6 col-sm-7">
        <div class="form-group has-feedback">
            <input type="text" class="datefieldjq form-control" name="StartDate" value="@dateval">
                <i class="form-control-feedback glyphicon glyphicon-calendar"></i>
        </div>
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(m => m.Department, new { @class = "col-md-3 col-sm-3 control-label" })
    <div class="col-md-6 col-sm-7">
        @Html.DropDownListFor(m => m.Department, selList, new { @class = "form-control" })
    </div>
</div>

Answer 1

我认为您要对齐的是输入域。如果我没记错的话，那么简单地将相同的size=""属性添加到您的<input>中应该会使它们的长度相同。