我怎么能有一个div行为,好像它是在与Bootstrap不同的设备上？

Question

我正在尝试创建一个Twitter Bootstrap应用程序,该应用程序显示一个div,该div显示我们SPA中不同设备大小(桌面,平板电脑,移动设备)的应用程序,其内部和外部都需要进行通信.单击指定的大小时,div应调整大小.像这样:

引导断点基于媒体查询,这些查询位于窗口级别.但我正试图在div上做这个工作.如果我们在div级别指定一个容器,则网格不会像调整窗口大小那样垂直堆叠,它们只会缩小.

更难的问题然后它听起来像一开始.:(关于如何解决这个问题的任何想法？

最简单的答案是iFrame,因此当div改变大小并且网格堆栈正确时,iFrame的窗口大小会被调整大小,但这并不理想,因为我们的SPA中从div的外部和内部都存在功能.

我很乐意听到更好的解决方案来处理这个问题!

Answer 1

那么您可以使用 JQuery 来实现这一点，或者您也可以使用 Knockout 库进行动态绑定，这样就可以使用自定义绑定来实现这一点。我要做的是使用淘汰赛绑定

<div id="devices"> It can have bindings which can have the values desktop, tablet & mobile<div>
<div id="leftDiv">Some Code...<div>
<div id="mainDiv">View<div>

• 我将从 id="devices" 的 div 标签中读取值，无论它是什么 {桌面、平板电脑、移动设备}，并且可以从自定义绑定中定义的属性访问它

• 其次应用一些 if 条件来执行所需的任务。喜欢

  $("#mainDiv").css( 应用你的 css );

对于每个条件。应用您希望在 css 中使用 id="mainDiv" 调整 div 大小的任何 css。