jQuery检测Bootstrap 3状态

在Bootstrap 3中，有4个状态; 超小型设备，小型设备，中型设备和大型设备。 我怎么知道该网站目前处于哪个州的jQuery？ 这样我可以进行一些处理，就像在超小型设备中一样，然后运行这个function。

谢谢。

Answer 1

我为bootstrap 3做了一些修改，试试这个“

function findBootstrapEnvironment() { var envs = ["ExtraSmall", "Small", "Medium", "Large"]; var envValues = ["xs", "sm", "md", "lg"]; var $el = $('
'); $el.appendTo($('body')); for (var i = envValues.length - 1; i >= 0; i--) { var envVal = envValues[i]; $el.addClass('hidden-'+envVal); if ($el.is(':hidden')) { $el.remove(); return envs[i] } }; } 

Answer 2

按照@Khurshid的回答（效果非常好），我编写了一个本机JavaScript实现， 速度明显更快 ：

 function findBootstrapEnvironment() { var envs = ["xs", "sm", "md", "lg"], doc = window.document, temp = doc.createElement("div"); doc.body.appendChild(temp); for (var i = envs.length - 1; i >= 0; i--) { var env = envs[i]; temp.className = "hidden-" + env; if (temp.offsetParent === null) { doc.body.removeChild(temp); return env; } } return ""; } 

Answer 3

我不得不为中等大小做类似的事情。

超小的媒体查询高达480px;

所以你可以这样说：

 if($(document).width > 480) { //Do Something } 

Answer 4

Bootstrap 4版本：

 function findBootstrapEnvironment() { var envs = ["sm", "md", "lg", "xl"]; var env = ""; var $el = $("
"); $el.appendTo($("body")); $el.addClass("d-block"); for (var i = envs.length - 1; i >= 0; i--) { env = envs[i]; $el.addClass("d-" + env + "-none"); if ($el.is(":hidden")) { $el.remove(); return env; } } $el.remove(); return "xs"; //extra small }