html – 当为所需的星号添加span时,Bootstrap input-group-addon

发布时间：2020-12-14 21:31:10 所属栏目：资源来源：网络整理

导读：我有以下引导的日期戳。当我添加一个span(“spanAstreisk”)以显示一个指示必填字段的星号时，图标的高度会增加，并且不再像文本框一样。如何解决这个问题？小提琴2：https://jsfiddle.net/ezvzvvqg/15/ 小提琴1：https://jsfiddle.net/ezvzvvqg/10/ HTML t

我有以下引导的日期戳。当我添加一个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>

解决方法

看起来问题是你把< label>在输入组内，但只有input-group-addon，input-group-btn和form-control应该在input-group内。 < label>正在迫使图标伸展以容纳标签。所以我删除了< label>并把它放在输入组之外。在我做完之后，星号插件工作正常。

这是一个小小的变化：https://jsfiddle.net/ezvzvvqg/18/

这里是Stack Snippet形式：

<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有一个其他星号。如果你想要的星号没有一个input-group-addon的样式，那么你可以使用一个span，然后应用这样的样式，使它像一个input-group-addon一样。您需要的样式声明是：display：table-cell，vertical-align-middle(这两个样式使星号垂直居中)，宽度为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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!