为所需的星号添加跨度时,引导输入组 - 插件对齐问题

Question

我有以下Bootstrap datepicker.当我添加span(spanAstreisk)以显示指示必填字段的星号时,图标的高度会增加,看起来它与文本框不对齐.我怎样才能解决这个问题？

小提琴2:https://jsfiddle.net/ezvzvvqg/15/

小提琴1:https://jsfiddle.net/ezvzvvqg/10/

HTML

<table class="table table-user-information" style="font-size:12px;">
    <tbody>
        <tr>
            <td class="tdPopupTextDescription">Effective Date:</td>
            <td id="tdEffectiveDate">          
                <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true">
                    <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;">
                    <label for="txtEffectiveDate" generated="true" class="error">This field is required.</label>
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                    <span class="glyphicon glyphicon-asterisk requiredAsterisk"></span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

看起来问题是你<label>在 the input-groupbut only里面放了一个input-group-addon，input-group-btn并且form-control应该在 the 里面input-group。这<label>迫使图标拉伸以适应标签。所以我删除了<label>并把它放在了外面input-group。在我这样做之后，星号插件工作得很好。

这是我的更改的小提琴：https ://jsfiddle.net/ezvzvvqg/18/

这是堆栈片段形式：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<table class="table table-user-information" style="font-size:12px;">
    <tbody>
        
        <tr>
            <td class="tdPopupTextDescription">Effective Date:</td>
            <td id="tdEffectiveDate">          
                <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true">
                    <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                    <span class="input-group-addon" id="sizing-addon1"><span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span></span>
                </div>
                <label for="txtEffectiveDate" generated="true" class="error">This field is required.</label>

            </td>
        </tr>
    </tbody>
</table>

更新：我注意到你还有一个没有的星号input-group-addon。如果您想要没有 an 样式的星号input-group-addon，那么您可以使用 span，然后应用使其表现得像 a 的样式input-group-addon。您需要的样式声明是：display:table-cell, vertical-align-middle（这两种样式使星号垂直居中）和width:1%（使其占用最少的空间）。另外padding:6px 12px还要给它与插件相同的间距。这是一个演示：

#spanAstreisk {
  display:table-cell;
  width:1%;
  vertical-align:middle;
  padding:6px 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<table class="table table-user-information" style="font-size:12px;">
    <tbody>
        
        <tr>
            <td class="tdPopupTextDescription">Effective Date:</td>
            <td id="tdEffectiveDate">          
                <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true">
                    <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                    <span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span>
                </div>
                <label for="txtEffectiveDate" generated="true" class="error">This field is required.</label>

            </td>
        </tr>
    </tbody>
</table>