Jquery 如何为我的日期选择器添加一个插件'；居中

我正在努力让我的日期选择器成为中心，我在使用Firefox时没有遇到任何问题。我打算试用Chrome和IE，

输入组插件

-

glyphicon

无法与我的日期选择器一起居中。有没有人知道解决这个问题的方法，或者指出我在思想上做错了什么

JSFiddle：

html:

---

看起来您正在尝试使用此框架。不完全确定自定义类的用途。尝试使用内置的以使内容居中。使用网格系统的好处是，您还可以具体了解它在不同大小屏幕上的外观。我已经编辑了您的代码以使用网格系统

<div class="container">
    <div class="row">
        <div id="step2" class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                <input type="text" style="height:30px;" class="datepicker1 form-control" placeholder="Select a date" value="" name="date1" />
            </div>
        </div>
    </div>
</div>

以下是我所做的事情和原因的总结

• 在代码周围添加了一个“container”div。如果没有它，网格系统将无法正常工作
• 将网格类添加到“step”分区中。在“xs”大小的屏幕上，它将占用10列，偏移量为1列（使其居中）；在“sm”屏幕上，它将占用8列，偏移量为2列；在“md”屏幕上，它将占用6列，偏移量为3列
• 我在datepicker中添加了一个“表单控件”类，使其呈现为引导表单字段
• 清理了一下HTML

---

不是我如何解决的，而是它让我走上了正确的道路！我忘了按正确的比例加一个div！非常感谢。

.container-xs-height {
    display:table;
    border-spacing:5px;
}
.row-xs-height {
    display:table-row;
}
.col-xs-height {
    display:table-cell;
    float:none;
}
.col-xs-middle {
    vertical-align:middle;
}

<div class="container">
    <div class="row">
        <div id="step2" class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                <input type="text" style="height:30px;" class="datepicker1 form-control" placeholder="Select a date" value="" name="date1" />
            </div>
        </div>
    </div>
</div>