Question

我正在尝试使用bootstrap来填充容器，具体取决于它的大小。当容器是整个页面或整个引导程序模式（几乎相同）时，我可以使用屏幕大小，就像使用bootstrap时默认情况一样。请参阅this JSFiddle以获取我想要的示例（这几乎是默认行为）。

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

您是否可以了解如何在特定容器内执行相同操作，例如dhtmlx窗口？

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

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>

我几天来一直在研究这个问题，尝试了许多事情但没有做任何事情。

如果您有任何想法，请提供帮助。

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

Bootstrap表单网格基于容器大小而不是屏幕大小

1 个答案: