Css Bootstrap 3 daterangepicker未采用100%宽度

我正在表单（）中使用自定义日期选择器（）

我希望daterangepicker像所有其他表单元素一样采用100%的宽度，但无法使其工作

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

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

但我使用的是（第二行末尾缺少

3

）：

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

同样，在小屏幕上，选择器中的输入宽度不相等：

---

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

您可以将

col-xs-12

类添加到

输入组中。这将强制组始终与其父容器一样宽

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


日期范围
到

您可以将
col-xs-12
类添加到
输入组中。这将强制组始终与其父容器一样宽

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


日期范围
到

问题是datepicker自定义
。输入组加载项
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
后，这两个错误都已修复，请参阅：
问题是datepicker custom
。输入组加载项
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
后，两个错误都已修复，请参见：
感谢您的快速回答：）这解决了全宽问题，但输入的宽度不相等又如何？在我的示例中，“到”和“自”字段的宽度似乎相同。我甚至检查了Firebug Box Model viewer，确认它们在整个范围内始终具有相同的尺寸。你在一个特定的浏览器上遇到问题了吗？我已经在IE11上检查过了，工作正常，但我在Chrome（v36.0.1985.125 m Win8.1）上看到了这个问题，这看起来就像我问题的第二个屏幕上显示的，你能在同一个浏览器上检查一下吗？是的，我也看到了，但为了真正注意到它，我必须将屏幕压缩到如此小的比例，以至于出现的实际日期选择器甚至不适合窗口。我怀疑你的用户是否能做到这一点。我看不到任何快速修复方法，但也许其他人可以。啊，很好，我没有研究实际的CSS，因为我不喜欢与库CSS混为一谈，以防它有其他意想不到的后果，但有时这是必要的，而且似乎对你有效。感谢你这么快的回答：）这解决了全宽度问题，但是输入的宽度不相等怎么办？在我的“to”和“from”字段似乎是相同的宽度。我甚至检查了Firebug Box Model viewer，确认它们在整个范围内始终具有相同的尺寸。你在一个特定的浏览器上遇到问题了吗？我已经在IE11上检查过了，工作正常，但我在Chrome（v36.0.1985.125 m Win8.1）上看到了这个问题，这看起来就像我问题的第二个屏幕上显示的，你能在同一个浏览器上检查一下吗？是的，我也看到了，但为了真正注意到它，我必须将屏幕压缩到如此小的比例，以至于出现的实际日期选择器甚至不适合窗口。我怀疑你的用户是否能做到这一点。我看不到任何快速修复方法，但也许其他人可以。啊，很好，我没有研究实际的CSS，因为我不喜欢与库CSS混为一谈，以防它有其他意想不到的后果，但有时这是必要的，它似乎对您有效。您可能希望将其设置为答案，以确保它始终显示在顶部，并且任何有类似问题的人都能快速找到正确的解决方案。@RobQuincey我必须等待2天才能将其标记为正确答案，但我会记得将其标记为绿色：）看来您毕竟忘记了；）您可能希望将其设置为答案，以确保它始终显示在顶部，并且任何有类似问题的人都能快速找到正确的解决方案。@RobQuincey我必须等待2天才能将其标记为正确答案，但我会记得将其标记为绿色：）看来您还是忘了；）