我正在使用Eternicode的Bootstrap-Datepicker，我希望将glyphicon对齐到输入字段的右侧 . 目前，输入与左侧对齐，并且glyphicon与最右侧对齐，并且它们之间有一堆空间 . 我还想这样做，以便日历将显示用户是否点击了glyphicon . 目前，它只显示日历，方法是单击输入字段 .

我已经完成了一些研究，从我发现它所说的用一个类设置为宽度来包装输入组 . 在我的例子中，它是col-md-10以匹配其他输入字段 . 如果我将它设置为col-md-3，那么它会将glyphicon与输入字段对齐，但之后该组合太短而无法匹配其他字段 . 如果我将它设置为col-md-4，它会在输入和glyphicon之间放置一个空格 . 除了将其设置为col-md-3以及将所有其他列设置为该大小之外，我还有其他选择吗？

<div class="form-group">
    @Html.LabelFor(model => model.CallDate, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div class="input-group date">
            <input id="callDatepicker" class="datepicker form-control" name="CallDate" type="text" />
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </div>
        </div>
        @Html.ValidationMessageFor(model => model.CallDate, "", new { @class = "text-danger" })
    </div>
</div>

此外，有没有办法将弹出日历添加到glyphicon？我尝试将datepicker类添加到插件组，但似乎没有用 . 我也没有在F12工具中看到任何错误 .

我没试这么成功 .

<div class="input-group date">
    <input id="callDatepicker" class="datepicker form-control" name="CallDate" type="text" />
    <div class="input-group-addon datepicker">
        <span class="glyphicon glyphicon-calendar"></span>
    </div>
</div>
jquery twitter-bootstrap datepicker