Glyphicon不放在文本框内glyphicon日历大小问题

Question

我正在使用jQuery验证插件来验证两个表单字段，名为“start date”＆amp;钱。这两个字段都有一个简单的验证方法，其中必需设置为 true 。我能够成功验证该领域。但是，我收到了一个奇怪的问题。当字段验证为有效或无效时， glyphicon-ok 图标和 glyphicon-remove 图标会出现在屏幕一侧而不是文本框中。 此外，只有当开始日期字段被评估为时，glyphicon-calender图标才会比文本框强更大 >无效，并显示错误消息。为什么会这样？

编辑 ：我已成功解决了“glyphicon-calender图标的高度大于高于文本的问题框仅当开始日期字段被评估为无效时，才会显示错误消息。“我目前仍在尝试解决为什么* glyphicon-ok **图标和 glyphicon-remove 图标出现在屏幕一侧而不是文本框中

演示：https://jsfiddle.net/Issaki1/gud7xjy0/23/

<form id="dataForm" method="post" action="#">
<div class="form-group col-md-12">
    <label class="control-label col-md-4" for="moneyInput">money</label>
    <div class="col-md-7">
        <input type="text" id="moneyInput" name="moneyInput" class="form-control font-bold"
               maxlength="100" placeholder="money" value="" />
    </div>
</div>
<div class="form-group col-md-12">
    <label class="control-label col-md-4" for="startDateInput">Start Date</label>
    <div class="col-md-7">
        <div class="input-group date" id="startDateInput" style="max-width: 280px" data-provide="datepicker">
            <input type="text" class="form-control" name="startDateInput">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </div>
        </div>
    </div>
</div>
<input type="submit" class="btn btn-primary" value="Save" id="saveButton" />

 $(document).ready(function () {
    $.validator.setDefaults({
        highlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error has-feedback');
                $(element).closest('.form-group').find('span.glyphicon-ok').remove();
                $(element).closest('.form-group').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else {
                $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
                $(element).closest('.form-group').find('span.glyphicon-remove').remove();
                $(element).closest('.form-group').append('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
            }
        }
    });

    $('#dataForm').validate({
        rules: {
            startDateInput: {
                required: true
            },
            moneyInput: {
                required: false
            }
        },
        submitHandler: function (form) {
            alert('success');
        }
    });
});