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

Question

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

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

在窗口/设备的当前分辨率下，我如何知道它是否将应用 col-xs-5 或 col-md-2 或 col-lg-1.

这个问题的原因是我必须向服务器请求元素数量。如果 Bootstrap 应用 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 中的任何内容，它只是重新调整了它的大小。

例如，有一种方法可以使用 hidden 在特定屏幕尺寸下隐藏 div 中的所有内容。所以如果你想隐藏屏幕大小 xs 的所有内容，那么你将使用一个名为 hidden-xs 的 div 类。这实际上并没有删除屏幕上的内容，而是像它的名字一样“隐藏”了它。

顺便说一句，每个类(class)的屏幕尺寸如下:

超小型设备电话 (<768px)

小型设备平板电脑(≥768px)

中型设备桌面(≥992px)

大型设备桌面(≥1200px)