Question

我正在使用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>

Bootstrap DatePicker glyphicon没有对齐或调用日历？

0 个答案: