定位元素错误的问题

Question

我正在创建一个简单的WordPress功能，用户可以在其中添加文本并编辑一些内容：

当我将宽度减小到5/12时，它看起来像这样：

哪个不好而且没有正确定位。此外，铅笔不可点击，不能使用他的功能。不确定它是否是JavaScript / jQuery问题，或者某些CSS样式被破坏了。我正在以下列方式创建元素：

$(".row-container .dx-columns-wrapper").droppable({
  accept: '.top-wrapper .dx-draggable-row, .top-wrapper .dx-draggable, .dx-columns, .dx-droppable',
  tolerance: "touch",
  activeClass: "dx-ui-state-highlight",
  drop: function(event, ui) {
    var element_class = $(ui.helper[0]).attr('class').split(' ')[0];

    if (element_class == 'dx-draggable-row') {
      var rows_id = 0;
      $('.dx-droppable').each(function() {
        var checked = $(this).data('row');
        if (parseInt(checked) > parseInt(rows_id)) rows_id = checked;
      });
      rows_id++;

      $(this).append('<div class="dx-droppable" data-row="' + rows_id + '">' +
        '<div class="dx-droppable-header">' +
        '<i class="fa fa-arrows-alt js-move-row" title="Move Row"></i>' +
        '<span class="pull-left dx-row-title">Row ' + rows_id + '</span>' +
        '<i class="fa fa-close pull-right dx-remove-row js-remove-row" title="Remove Element"></i>' +

        /** Edit row class */
        '<button class="js-edit-row-classes-btn-ok dx-edit-row-classes-btn-ok pull-right">OK</button>' +
        '<i class="js-edit-row-classes-btn dx-edit-row-classes-btn fa fa-pencil pull-right" title="Edit Classes"></i>' +
        '<span class="dx-row-classes pull-right">Row Classes</span>' +
        '<input type="text" class="dx-row-class-input">' +
        '</div><br></div>');

      $(document).init_comp();
    } else {
      var data_type = $(ui.helper[0]).data('type');
      var content = $(ui.helper[0]).html();

      if (data_type != undefined) {
        var col_id = 0;
        $('.dx-columns').each(function() {
          var check = $(this).attr('data-indx');
          if (parseInt(check) > parseInt(col_id)) col_id = check;
        });

        col_id++;

        $(this).append(
          '<div class="dx-columns dx-col-12" data-view="' + data_type + '" data-indx="' + col_id + '">' +
          '<i class="fa fa-arrows-alt dx-move-column js-move-column" title="Move Element"></i>' +
          '<span class="dx-section-name">' + content + '</span>' +
          '<i class="fa fa-arrow-left js-decrease-column-width" title="Decrease Element Width"></i>' +
          '<span class="dx-column-part">12</span>' +
          '<span>/</span>' +
          '<span class="dx-column-full">12</span>' +
          '<i class="fa fa-arrow-right js-increase-column-width" title="Increase Element Width"></i>' +
          '<i class="fa fa-close pull-right dx-remove-column js-remove-column" title="Remove Element"></i>' +
          '<i class="fa fa-cog pull-right dx-setting-column js-setting-column" title="Element Setting"></i>' +
          '<i class="fa fa-copy pull-right js-copy-column" title="Copy Element"></i>' +
          '<i class="fa fa-align-justify pull-right"><span class="small-column-properties"><i class="js-edit-col-classes-btn fa fa-pencil" title="Edit Classes"></i><i class="fa fa-copy js-copy-column" title="Copy Element"></i><i class="fa fa-cog dx-setting-column js-setting-column" title="Element Setting"></i><i class="fa fa-close dx-remove-column js-remove-column" title="Remove Element"></i></span><div id="triangle-down"></div></i>' +
          '<button class="js-edit-col-classes-btn-ok dx-edit-col-classes-btn-ok pull-right">OK</button><i class="js-edit-col-classes-btn fa fa-pencil pull-right" title="Edit Classes"></i><span class="dx-col-classes pull-right">Column Classes</span>' +
          '</div>'
        );

        $(document).find(".dx-columns").draggable({
          helper: 'clone',
          cursor: 'move',
          handle: '.js-move-column'
        });
      } else {
        $(ui.draggable).appendTo(this);

      }
    }

  }
});

有什么想法可以防止这个问题吗？