我正在尝试通过Bootstrap和Dropzone样式的结合来探索自己的方式，但是遇到了一个我无法理解的问题。我遇到的问题似乎是将预览窗格分为两列，而我似乎无法弄清楚是什么或在哪里。我猜这是在dropzone的CSS中的东西，但似乎找不到它。
我希望我的dropzone拖放区域出现在窗体的底部，该区域从引导偏移量3开始，跨越6列。我还希望它具有固定的高度，并且仅在文件处于处理状态时才显示文件名以及其下方的进度指示器。 （我尚未处理错误）
一旦容器显示dz成功，我已经有了jquery来搜寻和啄进度条并隐藏它们。我还使该区域可滚动，因此随着上载文件列表的增加，它不会变得过大。 （不幸的是，我们使用的MVC在模板下方自动插入了“提交”按钮，要重新放置它而不是非常丑陋，笨拙的hack是一个很大的麻烦。因此，要在拖放区域中创建文件列表，我需要制作它滚动并单击图标）
我的拖放区区域如下所示：
<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>
然后，我使用一个自定义模板，在其中放下了detail类，以摆脱通常容纳预览缩略图的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>
我尝试添加一个bootstrap col-sm-10来使模板占据dropzone框架的80％，但它似乎只与50％的窗格相关，因此其他一些方法首先将其拆分为两部分。在chrome中使用“计算的样式”窗格会显示固定的像素宽度，该宽度为灰色。在完整的样式列表中进行搜索，在列出的上下文中，我看不到任何明显的东西正在分解。
我注意到在外部div中删除dz-preview类可以使我获得所需的外观，但是如果没有将dz-preview指定为“某处”，我似乎就无法正确找到dz-成功并在文件一次后隐藏进度指示器做完了。
我对CSS不够熟悉，不知道如何覆盖dropzone样式所做的任何事情，并且在该基本dropzone css文件中有很多上下文引用，我似乎什至找不到可能会拆分该区域的内容首先是两个。
任何帮助表示赞赏。
最佳答案
好的，我终于找到哪种样式正在影响它，因此我为div添加了一个nofile-preview上下文，然后在文件中添加了一个本地类样式定义：（注意，我的dropzone的包装器使用'dropzone'作为名称。显然也支持dropzone-preview）
.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>
关于jquery - Dropzone.js与单列文件列表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45109357/