多个dropzone.js css样式

这是我第一次使用dropzone.js

我有一个HTML注册向导，包含3个步骤中的多个Dropzone.js，第一步出现一个css应用于所有dropzone类 .dropzone 第一个dropzone的样式正确，但其余的不是 .

在 Headers 我已添加到dropzone css的链接

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"></link>
 <link rel="stylesheet" href="{{ url_for('static', filename='css/dropzone.css') }}"></link>

我的HTML文件：

<form id="fzoneForm" class="fzone" action="/upload" method="post">
  <div class="_dropzone">General Info:
<!--- some forms input and lables here -->
  </div>
</form>
<form id="dropzoneForm" class="dropzone" action="/upload" method="post"> 

<!-- upload form 1-->
</form>

    <form id="fzoneForm2" class="fzone" action="/upload" method="post">
  <div class="_dropzone">General Info:
<!--- some forms input and lables here -->
  </div>
</form>
<form id="dropzoneForm2" class="dropzone" action="/upload" method="post"> 

<!-- upload form 2-->
</form>

<form id="fzoneForm3" class="fzone" action="/upload" method="post">
  <div class="_dropzone">General Info:
<!--- some forms input and lables here -->
  </div>
</form>
<form id="dropzoneForm3" class="dropzone" action="/upload" method="post"> 

<!-- upload form 3-->
</form>


 <script>


 Dropzone.autoDiscover = false;

var dz1 = new Dropzone(
    '#dropzoneForm',
    {
        url : "upload",
        autoProcessQueue: false ,
        paramName: 'file',
        addRemoveLinks: true,
        dictDefaultMessage: 'Drop ID',
        acceptedFiles:".png,.jpg,.gif,.bmp,.jpeg",
        init: function(){
          var submitButton = document.querySelector('#uploadID');
          myDZ = this;
          submitButton.addEventListener("click",function(){
            myDZ.processQueue();});}});

类似的代码var dz2 和 dz3

我使用javascript添加了两个按钮 next 和 previous 更改了步骤但是没有必要在这里添加它 .

它们中的每一个基本上都在同一页面上，但除非它是正确的步骤，否则会有 display:none

问题只是第一个 Dropzone 样式正确，其他两个搞砸了我已经检查了 Dropzone.css 和i 'm can see that it suppose to be applied to all classes not the first one only and to be fair it looks like it'但是这个潇洒的矩形就像是左边的2条划线，就是这样，只有第一个dropzone呈现为宽度为90％的全矩形 .