Jquery 带单列文件列表的Dropzone.js？

我正在尝试引导风格和dropzone风格的结合，但是我遇到了一个我都无法理解的问题。我遇到的问题是，我的预览窗格似乎被分成了两列，而我似乎不知道是什么或在哪里。我猜这是dropzone的css中的东西，但似乎找不到

我希望我的dropzone拖放区域显示在表单底部的一个块中，从引导偏移量3开始，跨越6列。我还希望它是一个固定的高度，只显示文件名，以及下面的进度指标，只有当文件正在处理中。（我还没有处理这些错误） 我已经有了jquery来搜索和搜索进度条，并在容器显示dz成功后隐藏它们。我还使该区域可滚动，这样随着上传文件列表的增加，它就不会变得难以管理。（不幸的是，我们使用的MVC自动将提交按钮插入模板下方，在没有真正丑陋、愚蠢的黑客攻击的情况下重新定位它是一件非常痛苦的事情。因此，要在拖放区域中有一个文件列表，我需要使其滚动并取消图标）

我的dropzone区域如下所示：

<div class="row">
    <!-- div class="col-sm-6 col-sm-offset-3 "><h4>Uploaded files</h4></div -->
    <div class="input-group col-sm-6 col-sm-offset-3 col-xs-12">
        <div class="dropzone" id="myDropzone" style="height:150px;overflow:hidden; overflow-y:scroll;">
        </div>
    </div>
</div>

然后，我使用了一个自定义模板，在该模板中我删除了details类，以摆脱通常容纳预览缩略图的100x100设置。（在某些情况下，我将在此表单上处理大量文件，因此我关闭了“创建缩略图”功能）

然后，我使用下面的自定义模板：

<div id="template-preview" class="dz-preview dz-file-preview">
    <div class="small">
        <span data-dz-name></span> <span class="pull-right">(<span class="dz-size" data-dz-size></span>)</span>
    </div>
    <div id="dz-info">
        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
        <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>
</div>

()

我尝试添加一个引导col-sm-10，以使模板占据dropzone框架的80%，但它似乎只与窗格的50%相关，因此其他一些东西首先将其拆分为两部分。使用chrome中的computed styles（计算样式）窗格，将显示一个固定的像素宽度，该宽度将变灰。在完整的样式列表中搜索，我没有看到在列出的上下文中有任何明显的东西将事情分解。 我注意到，删除外部div中的dz preview类给了我想要的外观，但是如果没有指定“某处”的dz preview，我似乎无法正确地找到dz success并在文件完成后隐藏进度指示器。 我对CSS不太熟悉，不知道如何覆盖dropzone样式所做的任何事情，而且在基本的dropzone CSS文件中有太多上下文引用，我甚至无法找到可能将该区域一分为二的内容

---

非常感谢您的帮助。

好的，我终于找到了影响它的样式之一，所以我为我的div添加了一个nofile预览上下文，然后在我的文件中添加了一个本地类样式定义：（注意，我的dropzone包装器使用“dropzone”作为名称。显然还支持dropzone预览）

.dropzone.dz-preview.dz-nofile-preview{
宽度：100%；
左：5%；
右：5%；
}
()

你能在JSFIDLE上添加一个工作示例吗？哦，天哪，我需要更新这个，因为我最终找到了设置“宽度：50%”的样式

.dropzone .dz-preview.dz-nofile-preview {
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

<div id="dropzonePreviewTemplate" style="display: none">
    <div id="template-preview" class="dz-preview dz-nofile-preview">
        <div class="small">
            <span class="" data-dz-name></span> <span class="pull-right">(<span class="dz-size" data-dz-size></span>)</span>
        </div>
    </div>
</div>