jquery - Bootstrap 3 fancyfile 在选项卡 Pane 中使用时中断

Question

我正在使用 Twitter Bootstrap 3.2 的 Fancyfile jQuery 插件 ( http://plugins.upbootstrap.com/bootstrap-fancyfile/ ) 将我的文件输入设置为更像 Bootstrap 的主题。

当在 tab-pane 中的输入上使用它时，在加载时不是可见的 tab-pane，输入中断；它变窄，占位符文本消失，单击输入的右侧部分可以触发表单提交。冲突是什么，有没有办法解决这个问题？

jsFiddle:http://jsfiddle.net/dbailey/bv2swf2t/1/

<div class="container">
    <ul class="nav nav-tabs">
                <li class="active"><a href="#main" data-toggle="tab">Description</a></li>
                <li><a href="#photos" data-toggle="tab">Photos</a></li>                                 
                <li><a href="#contributors" data-toggle="tab">Contributors</a></li>

            </ul>
    <div class="tab-content">
        <div class="tab-pane in active fade" id = "main">
            <input type="file" class="fancyfile"></input>
        </div>
        <div class="tab-pane fade" id = "photos">
            <input type="file" class="fancyfile"></input>
        </div>
        <div class="tab-pane fade" id = "contributors">
            <input type="file" class="fancyfile"></input>
        </div>
    </div>
</div>

<script>
$('input.fancyfile').fancyfile({
    text: 'Select File',
    icon: '',
    style: 'btn-primary',
    placeholder: 'Select File…'
});
</script>

Answer 1

我找不到冲突的确切来源。不知何故，宽度在后两个选项卡上设置为 11px。占位符文本仍然存在，只是由于框的大小而看不到它。

这里有一个简单的修复方法:只需使用 css 手动设置输入框的宽度。您必须放置 !important 标志，这样脚本才不会覆盖它。

.fake-input {
    width: 188px !important; /* same as first one
}

fiddle :http://jsfiddle.net/bv2swf2t/2/

编辑:阅读您的评论并再次查看后，该按钮不起作用的原因是实际按钮没有任何作用。 “fancyfile”输入应该占据输入和按钮的宽度，这会打开“选择文件”对话框。出于某种原因，宽度在选项卡 2 和 3 中设置为 0px。修复与上面类似:

.fancyfile {
    width: 280px !important; /* same as first one
}

这会在按钮上扩展输入框，并匹配第一个框的功能。

希望这对您有所帮助!