在dhtmlx模态窗口中获取响应引导窗体

Question

我正在开发的软件有一个dhtmlx模式窗口，其中包含多个选项卡。在每个选项卡中，都显示了生成的表单(基于数据)。表单由JavaScript、JQuery和一些dhtmlx控件组成。

我目前正在尝试使用引导( dhtmlx没有响应)获取响应表单。

我有两个问题：

1. dhtmlx模式窗口不会动态刷新内容，它将等待调整大小以刷新内容。我需要通过引导来动态地重新组织内容，同时调整模式窗口的大小。
2. 引导col-*-*网格系统响应屏幕大小，而不是模态窗口大小。我需要我的表格对模态窗口的大小做出反应。例如，如果我的模态窗口很大，我需要表单中的多列，但是如果它很小，我只需要一个列。在这个JSFiddle中，dhtmlx窗口的内部不响应于引导。

如果保留dhtmlx模式窗口是不可能的或者不是一个好主意(它会破坏我需要的响应设计吗？)，是否有可能在不从头开始的情况下将dhtmlx窗口替换为引导模式？

​

​

Answer 1

我找不到一种优雅的方法来做这件事，所以我做得很艰难。这是我将要使用的解决方案(而且这是可行的)。

我写了一个例子，我改变了类，因为我需要如何在我的表单中使用引导程序，但是您可以很容易地根据您自己的需要来调整它。

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(' ');
        });
    });
}