Twitter引导表单输入溢出仅在Chrome上

Twitter Bootstrap Form Input Overflow on Chrome Only

本文关键字：Chrome 溢出 输入 表单 Twitter      更新时间：2023-09-26

我遇到了一个奇怪的问题，即datetime-local输入在Chrome上溢出其边界(到目前为止在Chrome 35 x64 for Linux上测试)，但在Firefox(29.0)上没有。下面是Chrome浏览器的截图:

铬截图

在Firefox中是这样的:

firefox截图

相关的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 -->

没有任何css除了twitter引导影响它。我用的是最近的版本(几天前下载的)。

如何使输入字段在其div中受到约束?我确实想让它们占据整个宽度，但仅此而已。此外，是否有可能得到跨度与。input-group-addon是相同的宽度，而不给他们固定的，像素单位的值?我试着给它们分配相同的宽度作为百分比，但没有任何效果

datetime在firefox中不再支持，当您设置datetime-local时，它似乎可以工作

这里有一个关于它的讨论

在铬的datetime-local这是支持的最小宽度，无论容器div所以似乎是打破了，但它不是。如果你想输入datetime-local那么你需要在容器

中留出足够的空间http://html5test.com/compare/feature/form-datetime-local-element.html

相关文章：