Question

我正在尝试让我的日期选择器居中，而且在使用Firefox时我没有偶然发现任何问题。我将尝试使用Chrome和IE，input-group-addon - glyphicon不会与我的日期选择器一起居中。有没有人知道解决这个问题的方法，或者在我的思考中指出我做错了什么？

JSFiddle：http://jsfiddle.net/0k60y710/2/

HTML：

<div class="row">
    <div id="step2" class="stepDiv" style="text-align:center">
        <div style="display: inline-block;">
            <div class="input-group"> 
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                <input type="text" style="height:30px;" class="datepicker1" placeholder="Select a date" value="" name="date1">
            </div>
        </div>
    </div>
</div>

的CSS：

.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;
}

Answer 1

看起来你正试图在这里反对这个框架。不完全确定您的自定义类的用途。尝试使用内置的Grid system和offsets来集中您的内容。使用网格系统的好处是你可以具体了解它在不同大小的屏幕上的外观。我已编辑您的代码以改为使用网格系统。

<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>

Updated fiddle

总结了我的所作所为和原因。

添加了一个＆＃39;容器＆＃39; div代码。没有它，网格系统将无法正常工作。
将网格类添加到您的步骤＆＃39; DIV。在＆＃39; xs＆＃39;尺寸屏幕将占用10列，1列偏移（使其居中），在＆＃39; sm＆＃39;它将占用8列，具有2列偏移，并且在＆＃39; md＆＃39;屏幕将占用6列，3列偏移。
我添加了一类“表格控制”＆＃39;到你的日期选择器，让它像Bootstrap表单字段一样呈现
稍微清理了一下HTML

如何获得以我的日期选择器为中心的插件

1 个答案: