在dhtmlx模式窗口中获取响应式引导程序表单

Question

我正在处理的软件有一个dhtmlx模态窗口，里面有多个标签。在每个选项卡中，显示生成的表单（基于数据）。表单由JavaScript，JQuery和一些dhtmlx控件组成。

我目前正在尝试使用bootstrap获取响应式表单（因为dhtmlx没有响应）。

我有两个问题：

1. dhtmlx模式窗口不会动态刷新内容，它会一直等到调整大小以刷新内容。我需要在调整模式窗口大小时通过bootstrap动态重组内容。
2. Bootstrap col-*-*网格系统对屏幕大小做出反应，而不是模态窗口大小。我需要我的表单来对模态窗口大小做出反应。举个例子，如果我的模态窗口很大，我的表单中需要多列，但如果它很小，我只需要一列。在this JSFiddle中，dhtmlx窗口的内部对bootstrap没有响应。

如果这不可能或不是一个好主意保留dhtmlx模态窗口（它会破坏我需要的响应式设计吗？），是否可以用bootstrap模式替换dhtmlx窗口而无需从头开始？

Answer 1

我找不到以优雅的方式做到这一点的方法，所以我这么做了。这是我将使用的解决方案（并且有效）。

我写了一个例子，因为我需要更改我在表单中使用bootstrap所需的类，但是你可以根据自己的需要轻松调整它。

window.attachEvent("onResizeFinish", function(obj){
    deleteClassCol();
    if (obj.getDimension()[0] < 768)
    {
      $('.form-group').addClass('col-xs-12');
      $('.label-control').addClass('col-xs-12');
      $('.theInput').addClass('col-xs-12');
    }
    else if (obj.getDimension()[0] < 992)
    {
      $('.form-group').addClass('col-xs-6');
      $('.label-control').addClass('col-xs-2');
      $('.theInput').addClass('col-xs-10');
    }
    else if (obj.getDimension()[0] < 1200)
    {
      $('.form-group').addClass('col-xs-4');
      $('.label-control').addClass('col-xs-2');
      $('.theInput').addClass('col-xs-10');
    }
    else
    {
      $('.form-group').addClass('col-xs-3');
      $('.label-control').addClass('col-xs-2');
      $('.theInput').addClass('col-xs-10');
    }
});

function deleteClassCol(){
    [".form-group", ".label-control", ".theInput"].forEach(function(theClass) {
    $(theClass).removeClass (function (index, css) {
        return (css.match (/(^|\s)col-\S+/g) || []).join(' ');
        });
    });
}