基於容器大小而不是屏幕大小的引導表格網格

我想用引導程序來填充容器，具體取決於它的大小。當容器是整個頁面或整個引導模式（幾乎相同）時，我可以用屏幕大小來做到這一點，就像使用引導時默認的那樣。請參閱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>

我一直在研究這個問題了兩天，試圖很多事情，但一事無成。

如果你有一個想法，請幫助。

來源

2016-06-28 David G.

我找不到一種方法以優雅的方式做到這一點，所以我做到了這一點。這是我將使用的解決方案（並且可行）。

我寫了一個例子，我改變了類，因爲我需要如何在表單中使用引導程序，但是您可以輕鬆地根據自己的需要來調整它。

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

來源

2016-06-29 13:28:15

基於容器大小而不是屏幕大小的引導表格網格

回答

相關問題