twitter-bootstrap Bootstrap 3 的 .hidden- 和 .visible- 适用于手机、平板电脑和台式机吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22536591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Where are Bootstrap 3's .hidden- & .visible- for phone, tablet & desktop?
提问by Gone Coding
I have a specific requirement for my JQuery plugins to "know" what size Bootstrap is using (e.g. xs, sm, md, lg phone, tablet or desktop), so I decided to add classes to the body tag I could query.
我对我的 JQuery 插件有一个特定的要求，即“知道”Bootstrap 使用的尺寸（例如 xs、sm、md、lg 手机、平板电脑或台式机），所以我决定将类添加到我可以查询的 body 标签中。
Based on a couple of examples around the net I came up with this JQuery for Bootstrap I call jstrap:
基于网络上的几个例子，我想出了这个用于 Bootstrap 的 JQuery，我称之为 jstrap：
http://jsfiddle.net/TrueBlueAussie/52VtD/3767/
http://jsfiddle.net/TrueBlueAussie/52VtD/3767/
If you resize the output pane width, you will see the colours change based on the bootstrap size.
如果调整输出窗格宽度的大小，您将看到颜色根据引导程序大小而变化。
// Detect current bootstrap "size" and set appropriate "Size-" class on body element to allow for jQuery access (and additional styling)
function jstrap()
{
var sizes = ["lg", "md", "sm", "xs", "phone", "tablet", "desktop"];
var $el = $('<div>'),
$body = $('body');
$body.append($el);
for (var i = 0; i < 7; i++)
{
var size = sizes[i];
if ($el.addClass('hidden-' + size).is(':hidden'))
{
// Decorate body with a size class
$body.addClass("Size-" + size);
}
else
{
// Remove this size (if previously present) as not applicable
$body.removeClass("Size-" + size);
}
};
$el.remove();
}
// Call jstrap on DOM load and on window resize
$(function ()
{
$(window).resize(function ()
{
jstrap();
});
jstrap();
});
It sets Size-styles on the bodyelement, based on the current bootstrap styling, but I found that the .hidden-phone, .hidden-tablet & .hidden-desktop do not appear to work. According to another post responsive.less and other responsive less files missing from Bootstrapthat functionality is included in bootstrap 3, but it appears to always have .hidden-desktop, .hidden-tablet and .hidden-phone set.
它根据当前的引导程序样式Size-在body元素上设置样式，但我发现 .hidden-phone、.hidden-tablet 和 .hidden-desktop 似乎不起作用。根据另一篇文章responsive.less 和Bootstrap中缺少的其他responsiveless 文件，该功能包含在bootstrap 3 中，但它似乎总是包含.hidden-desktop、.hidden-tablet 和.hidden-phone 集。
What am I missing?
我错过了什么？
Note: this is formatted for .less, so no complaints about the code formatting :)
注意：这是为 .less 格式化的，所以没有关于代码格式的抱怨 :)
回答by moonwave99
In BS3 you just have .hidden-xs/sm/md/lg, phone/tablet/desktop apply for BS2.x only [as the question you linked states, by the way].
在 BS3 中.hidden-xs/sm/md/lg，手机/平板电脑/台式机仅适用于 BS2.x [顺便说一下，正如您链接的问题所述]。
