Bootstrap 3 daterangepicker不占用100％宽度

Question

我在表单（https://github.com/eternicode/bootstrap-datepicker）中使用自定义日期选择器（http://jsfiddle.net/Misiu/a3NV4/22/）

我希望daterangepicker像所有其他表单元素一样占据100％的宽度，但不能让它工作。

我唯一的解决方法是使用datepicker css for bootstrap 2.我应该使用这些规则：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@import url('http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css');

但我正在使用（第二行末尾缺少3）：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@import url('http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css');

这是我使用bootstrap 3 css时得到的：

也在拾取器的小屏幕输入上没有相同的宽度：

我想完全切换到bootstrap 3，但这很小但是阻止我这样做。

Answer 1

您可以将col-xs-12课程添加到input-group。这将迫使该组始终与其父容器一样宽。

<div class="form-group">
    <label class="col-sm-3 control-label">Dates range</label>
    <div class="col-sm-9">
        <div class="input-daterange" id="datepicker">
             <div class="input-group col-xs-12">
                 <input type="text" class="input-small form-control" name="start" />
                 <span class="input-group-addon">to</span>
                 <input type="text" class="input-small form-control" name="end" />
             </div>
        </div>
     </div>
</div>

Updated Fiddle

Answer 2

问题是datepicker自定义.input-group-addon css。

.input-daterange .input-group-addon {
    width: auto; /*remove this line*/
    min-width: 16px;
    padding: 4px 5px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    vertical-align: middle;
    background-color: #eeeeee;
    border: solid #cccccc;
    border-width: 1px 0;
    margin-left: -5px;
    margin-right: -5px;
}

删除width: auto后，修复了两个错误，请参阅：http://jsfiddle.net/Misiu/a3NV4/24/