我怎样才能让 div 像在使用 Bootstrap 的不同设备上一样工作？

Question

我正在尝试创建一个 Twitter Bootstrap 应用程序，该应用程序显示一个 div，该 div 在我们的 SPA 中显示不同设备尺寸（台式机、平板电脑、移动设备）的应用程序，其内部和外部存在需要通信的功能。单击指定大小时，div 应调整大小。像这样：

引导断点基于窗口级别的媒体查询。但我正试图在 div 上完成这项工作。如果我们在 div 级别指定容器，网格将不会像调整窗口大小时那样垂直堆叠，它们只会缩小。

比一开始听起来更难的问题。 :(关于如何解决这个问题的任何想法？

最简单的答案是 iFrame，因此 iFrame 的窗口大小会随着 div 大小的变化和网格正确堆叠而调整大小，但这并不理想，因为我们的 SPA 中存在来自 div 外部和内部的功能。

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

Answer 1

bootstrap 对 div 有不同的列大小。 .col-xs- .col-sm- .col-md- .col-lg- xSmall 和 Small 和 Medium 和 Large。这些是您的 div 的类。

Answer 2

好吧，Bootstrap 只是 CSS 和一点用 LESS 和 SASS 编写的 js，因此您可以修改 LESS/SASS 版本的 Bootstrap 文件并将所有媒体查询替换为类名。 LESS 预处理器的语法允许您嵌套 CSS 声明，例如，以下 LESS 声明：

.mobile {
    .foo { ... }
    .bar { ... }
}

相当于CSS：

.mobile .foo { ... }
.mobile .bar { ... }

一旦你用 CSS 类替换了媒体查询，你就需要一些 JavaScript 来将这些类添加到元素中，这些元素的子元素需要你想要伪造的任何媒体查询。

为了提高可靠性，使样式不会泄漏到周围的页面，您可能希望使用作用域 CSS，但 browser support for scoped CSS 在这个阶段相当令人震惊。

Answer 3

您可以为此使用 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 标记中读取值，无论它是 {desktop、tablet、mobile}，并且可以从自定义绑定中定义的属性访问它

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

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

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

Answer 4

jQuery 是解决您问题的简单、快速和最佳的解决方案。 你可以使用

$("#idForSize").click(function(){
   $("#idForDiv").css({'height','20px','width','30px'});
});