Question

我有一个div标签，如下所示。

<div class="col-xs-5 col-md-2 col-lg-1"></div>

根据窗口/设备的当前分辨率，我如何知道它是应用col-xs-5还是col-md-2还是col-lg-1。

这个问题的原因是我必须向服务器请求项目数。如果引导程序适用col-xs-5，我将请求10个项目。否则20项，分别为30项。

我有什么方法可以知道哪个班级适用于我的DIV标签？

Answer 1

您需要查看其网站http://getbootstrap.com/css/#grid

上的信息

但正在发生的事情是，当div具有<div class="col-xs-5 col-md-2 col-lg-1"></div>这些类名时，它将根据屏幕大小应用它们。 bootstrap适用于12列网格系统，所以如果你使用col-xs-5那么当屏幕宽度为xs（移动）时它只会填满其中5列，然后一旦屏幕达到中等大小的屏幕，它只会如果您使用col-md-2，请填写其中2列。

这实际上并没有改变你的html中的任何内容，只是重新调整它的大小。

例如，有一种方法可以隐藏div中某些屏幕尺寸隐藏的内容。因此，如果你想隐藏屏幕尺寸为xs的所有内容，那么你会使用一个名为hidden-xs的div类，这实际上并没有删除屏幕上的内容，但它的名字就像它的名字一样，隐藏了＃34;它

btw每个班级的屏幕尺寸如下：

超小型设备电话（＆lt; 768px）

小型设备平板电脑（≥768px）

中型设备台式机（≥992px）

大型设备台式机（≥1200px）

Answer 2

Bootstrap会根据设备宽度以不同的方式让您样式内容，但如果您想加载不同/更多/更少的内容，您可以使用jQuery检测宽度。可能最好使用与Bootstrap相同的断点来保持一致。然后以某种方式根据if语句加载你想要的内容：

var width = $(window).width();

if (width < 767){
  // load your "xs" content
} else if ((width >= 768) && (width < 991)) {
  // load your "sm" content
} else if ((width >= 992) && (width < 1200)){
  // load your "md" content
} else {
  // load your "lg" content
}

话虽这么说，bootstrap也允许show/hide在不同的设备宽度，这也可以解决你的问题，但有相当多的额外标记。

如何知道将在Bootstrap中应用哪个类

2 个答案: