问如何使用Bootstrap让div像在不同的设备上一样工作？

EN

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

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

等同于CSS：

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

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

为了获得额外的可靠性，这样样式就不会泄漏到周围的页面，你可能想要使用作用域CSS，但是browser support for scoped CSS在这个阶段相当可怕。

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

您可以使用JQuery来实现这一点，或者您也可以使用knockout库来实现动态绑定，该库支持使用自定义绑定来实现这一点。下面是我将使用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>

无论设备是什么{台式机、平板电脑、移动设备}，我都会从带有设备的bindings

• Secondly标签中读取值，并且可以从自定义设备中定义的属性中访问它，并应用一些if条件来执行所需的任务。喜欢

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

对于每种情况。使用css中的id="mainDiv“来应用你想要调整div大小的任何css。