twitter-bootstrap – Twitter Bootstrap – 输入组 – 插件对齐

发布时间：2020-12-18 00:28:11 所属栏目：安全来源：网络整理

导读：我目前正在创建一个表单,但是如果我添加一个带有input-group-addon的输入组,那么该输入将与其他输入不对齐. 插件似乎影响输入的宽度. 我的部分代码： div class="form-group" label for="inputName" class="col-sm-2 control-label"Name/label div class="co

我目前正在创建一个表单,但是如果我添加一个带有input-group-addon的输入组,那么该输入将与其他输入不对齐.

插件似乎影响输入的宽度.

我的部分代码：

<div class="form-group">
    <label for="inputName" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-3">
        <input type="text" class="form-control" id="inputName" placeholder="Name" name="name" value="{{name}}" onblur="isEmpty(this)">
    </div>
</div>


<div class="form-group">
    <label for="inputLastSeen" class="col-sm-2 control-label">Last Seen</label>
    <div class="col-sm-3 input-group date form_datetime"
         data-link-field="inputLastSeen">
        <input type="text" class="form-control" value="" readonly>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-th">
            </span>
        </span>
    </div>
    <input type="hidden" id="inputLastSeen" name="lastSeen" value="">
</div>

**我使用http://www.malot.fr/bootstrap-datetimepicker/demo.php作为DateTimePicker

解决方法

阅读 the input group docs:

Don’t mix with other components

Do not mix form groups or grid column classes directly with input groups. Instead,nest the input group inside of the form group or grid-related element.

(重点补充)

所以代替：

<div class="col-sm-3 input-group">

你要：

<div class="col-sm-3">
    <div class="input-group">

（编辑：李大同）

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