画面サイズの代わりにコンテナサイズに基づくブートストラップフォームグリッド

Question

コンテナをサイズに応じて塗りつぶすためにブートストラップを使用しようとしています。私は、ブートストラップを使用するときに、デフォルトで行うように、コンテナがページ全体またはブートストラップモード全体（これはほとんど同じです）であるときに、画面サイズで行うことができます。私が欲しいものの例については、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>

私は、数日間、この問題を研究物事の多くをしようとしているが、何も達成されていません。

アイデアがあれば、お手伝いください。

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