Dropzone JS输入文本破坏了缩略图CSS

Question

我正在使用Dropzone JS，并且需要在图像下方添加输入文本以为其指定自定义名称。但是当我这样做时，其他缩略图元素会被推到右侧，进度条也不再居中。

这是我的codepen

我正在使用此代码添加输入文本：

this.on("addedfile", function (file) {
  let unique_field_id = new Date().getTime();

  let title = file.title == undefined ? "" : file.title;
  file._div = Dropzone.createElement("<div>");
  file._titleLabel = Dropzone.createElement("<p>Title:</p>");
  file._titleBox = Dropzone.createElement("<input id='"+file.name+unique_field_id+"_title' class='form-control' type='text' name='title' value="+title+" >");
  file.previewElement.appendChild(file._div);
  file._div.appendChild(file._titleLabel);
  file._div.appendChild(file._titleBox);
});

添加文件以查看我的问题。

我注意到，如果我从代码库中删除引导程序库，那么它会起作用，除了进度条以外，所有元素都居中居中，Codepen without bootstrap不在居中。