使用 Bootstrap 3.1 修复 Firefox 文件输入？

Posted 2023-03-06

【中文标题】使用 Bootstrap 3.1 修复 Firefox 文件输入？

【英文标题】：Fix for Firefox File Input using Bootstrap 3.1?

【发布时间】：2014-03-29 18:34:37

【问题描述】：

Firefox 上文件选择器中的浏览按钮使用 Bootstrap 3.1 超出其边界

<div class="panel" role="form">
    <div class="container-fluid form-horizontal">
        <div class="row form-group">
            <div class="col-xs-12">
                <input type="file" class="form-control" />
            </div>
        </div>
    </div>
</div>

这是小提琴：http://jsfiddle.net/vFt5K/

有人对此有优雅的解决方法吗？

【参考方案1】：

添加

.form-control 
    height: auto;

到您的 css 将解决您的问题——我会将它标记到一个额外的类，以确保它不会干扰其他任何东西。

<input type="file" class="form-control my-form-control" />

.form-control.my-form-control 
    height: auto;

JSFiddle

【讨论】：

+1。虽然这可行，但它会破坏该行任何其他单元格的垂直对齐方式。

哎呀。经过一些试验，我意识到我的垂直对齐问题是由于其他原因造成的。很好的答案：D

【参考方案2】：

为像我这样使用input-sm 类设置输入样式的其他人添加答案。 Ceili 的解决方案会覆盖 input-sm 类设置的高度，从而使您的文件输入高于其他输入。

我建议的解决方案是减少文件输入的顶部和底部填充以匹配其他输入的高度。

<input type="file" class="form-control input-sm input-file-sm">

/* For Firefox only */
@-moz-document url-prefix() 
    .input-file-sm 
        height: auto;
        padding-top: 2px;
        padding-bottom: 1px;
    

通过使用@-moz-document url-prefix()，您将只针对 Firefox 定位该类。更多关于 here.

希望对某人有所帮助。