仅限 Chrome 上的 Twitter Bootstrap 表单输入溢出

Question

我遇到了一个奇怪的问题，datetime-local 输入在 Chrome 上溢出了它们的边界（到目前为止在 Chrome 35 x64 for Linux 上进行了测试），但在 Firefox (29.0) 上没有。这是 Chrome 中发生的情况的屏幕截图：

chrome screenshot

这是它在 Firefox 中的样子：

firefox screenshot

这是相关的 HTML：

    <div class="container-fluid">
        <div class="row">
            <div id="filter-panel" class="col-md-3">
                <ul class="list-group">
                     <!-- Filter by time -->
                         <li class="list-group-item">
                             <h4>Filter by Time</h4>
                             <div class="input-group">
                                 <span class="input-group-addon">Oldest</span>
                                 <input type="datetime-local" class="form-control" id="log-filter-early-time">
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">Newest</span>
                                <input type="datetime-local" class="form-control" id="log-filter-late-time">
                            </div>
                        </li>
                        <!-- more li elements -->

除了影响它的 twitter 引导程序之外，没有任何 css。我使用的是最新版本（几天前下载的）。

我怎样才能使输入字段被限制在它们的 div 中？我确实希望它们占据整个宽度，但仅此而已。此外，是否可以使用 .input-group-addon 获得相同的宽度而不给它们固定的像素单位值？我尝试为它们分配与百分比相同的宽度，但这没有任何效果。

Answer 1

datetime 在您将 datetime-local 设置为有效时，Firefox 不再支持它

here is a discussion about it

在 chrome 中，datetime-local 即 supported 的最小宽度与容器 div 无关，因此似乎已损坏，但不是 .. 如果您想要 datetime-local 输入，您必须在容器中有足够的空间

http://html5test.com/compare/feature/form-datetime-local-element.html