Twitter Bootstrap - 输入组插件对齐答案

【问题标题】：Twitter Bootstrap - input-group-addon alignmentTwitter Bootstrap - 输入组插件对齐
【发布时间】：2014-05-30 11:11:49
【问题描述】：

我目前正在制作一个表单，但如果我使用 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

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

阅读the input group docs:

不要与其他成分混合

不要将表单组或网格列类直接与输入组混合。相反，将输入组嵌套在表单组或与网格相关的元素中。

（强调）

所以而不是：

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

你想要：

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

【讨论】：