基于容器大小而不是屏幕大小的引导表格网格

问题描述：

我想用引导程序来填充容器，具体取决于它的大小。当容器是整个页面或整个引导模式（几乎相同）时，我可以用屏幕大小来做到这一点，就像使用引导时默认的那样。请参阅this JSFiddle查看我想要的示例（这几乎是默认行为）。基于容器大小而不是屏幕大小的引导表格网格

我的问题是当容器是其他东西，如dhtmlx模态窗口。我正在尝试使用col - * - *但它没有任何意义，因为我不是试图适合屏幕，而是只适合容器。我尝试了跨度 - *但我无法让它正常工作。

你有一个想法，我可以做同样的事情，但在一个特定的容器，如dhtmlx窗口？

此代码片段是一个代码示例，其中有一个容器（dhtmlx模式窗口），我需要为引导设置一个容器，并根据此容器的大小获取响应网格，而不是屏幕。

var myForm, formData; 
 
\t \t var dhxWins, w1; 
 
\t \t function doOnLoad() { 
 
\t \t \t dhxWins = new dhtmlXWindows(); 
 
\t \t \t dhxWins.attachViewportTo("vp"); 
 
\t \t \t w1 = dhxWins.createWindow("w1", 10, 10, 300, 250); 
 
\t \t \t myForm = w1.attachHTMLString(
 
     \t '<div class="container">' + 
 
     \t '<div class="form-group col-xs-12 col-sm-6">' + 
 
     \t \t '<label>label</label>' + 
 
      '<div>' + 
 
      \t '<input class="form-control" type="text">' + 
 
      '</div>' + 
 
      '</div>' + 
 
     '</div>' 
 
    ); 
 
\t \t } 
 
doOnLoad();

div#vp { 
 
    height: 600px; 
 
    border: 1px solid #dfdfdf; 
 
}

<link rel="stylesheet" href="https://2a6781b6e7331b7c52c1706cd28c7de3f641b52b.googledrive.com/host/0B4bedT44-LokVFBFUXlaVEthaFE?t=.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ecropolis.s3.amazonaws.com/ui/libs/moment.min.js"></script> 
 
<script src="https://344bb70794e57c6753700eb885a1f4eb0c383612.googledrive.com/host/0B4bedT44-LokaV9tODJoX29BVFk"></script> 
 

 
<div id="vp"></div>

我一直在研究这个问题了两天，试图很多事情，但一事无成。

如果你有一个想法，请帮助。

答

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

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

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

基于容器大小而不是屏幕大小的引导表格网格

相关推荐