基于容器大小而非屏幕大小的Bootstrap表单网格

Question

我想使用Bootstrap填充容器，使其根据大小自适应。当容器占据整个页面或整个Bootstrap模态框时，可以使用屏幕大小来实现。这是使用Bootstrap的默认行为。请参考此JSFiddle，了解我想要的效果（这基本上是默认行为）。

但是当容器是其他类型的窗口（如dhtmlx模态窗口）时，我的问题就出现了。我仍然想使用col-*-*，但这没有意义，因为我只需要适应容器而不是整个屏幕。我尝试使用spans-*，但无法正确使用它。

您是否有任何想法，可以让我在特定容器内（例如dhtmlx窗口）实现相同的效果？

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

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

我已经研究了这个问题几天，试过很多方法但是没有任何进展。

如果您有想法，请帮忙。

- David Gourde

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

- David Gourde