twitter-bootstrap bootstrap 4 响应式实用程序可见/隐藏 xs sm lg 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45666656/
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
bootstrap 4 responsive utilities visible / hidden xs sm lg not working
提问by Yatko
Having an issue with the new responsive utilities hidden / visible classes, when migrating to Bootstrap 4. I am aware that .hidden- classes have been removed from v3 and replacedwith .hidden-*-up.hidden-*-down. Using the new .hidden-*-up.hidden-*-downclasses but the elements aren't changing to visible/hidden. Can't figure out why.
迁移到Bootstrap 4时，新的响应式实用程序隐藏/可见类存在问题。我知道 .hidden- 类已从 v3 中删除并替换为. 使用新类，但元素不会更改为可见/隐藏。想不通为什么。.hidden-*-up.hidden-*-down.hidden-*-up.hidden-*-down
<div class="col hidden-xs-down">
<span class="vcard">
…
</span>
</div>
<div class="col hidden-lg-down">
<div class="hidden-sm-down">
…
</div>
<div class="hidden-xs-down">
…
</div>
</div>
* nothing is hidden in this example, regardless of screen size (Safari, Responsive Design Mode)
*无论屏幕大小如何（Safari、响应式设计模式），此示例中均未隐藏任何内容
回答by Yatko
With Bootstrap 4 .hidden-*classes were completely removed(yes, they were replaced by hidden-*-*but those classes are also gone from v4 alphas).
Bootstrap 4.hidden-*类被完全删除（是的，它们被替换了，hidden-*-*但这些类也从 v4 alpha 中消失了）。
Starting with v4-beta, you can combine .d-*-noneand .d-*-blockclasses to achieve the same result.
从 v4-beta 开始，您可以组合.d-*-none和.d-*-block类来实现相同的结果。
visible-* was removedas well; instead of using explicit .visible-*classes, make the element visible by not hiding it (again, use combinations of .d-none .d-md-block). Here is the working example:
可见-* 也被删除了；不要使用显式.visible-*类，而是通过不隐藏元素来使元素可见（再次使用 .d-none .d-md-block 的组合）。这是工作示例：
<div class="col d-none d-sm-block">
<span class="vcard">
…
</span>
</div>
<div class="col d-none d-xl-block">
<div class="d-none d-md-block">
…
</div>
<div class="d-none d-sm-block">
…
</div>
</div>
class="hidden-xs"becomes class="d-none d-sm-block"(or d-none d-sm-inline-block) ...
class="hidden-xs"变成class="d-none d-sm-block"（或d-none d-sm-inline-block）...
<span class="d-none d-sm-inline">hidden-xs</span>
<span class="d-none d-sm-inline-block">hidden-xs</span>
An example of Bootstrap 4 responsive utilities:
Bootstrap 4 响应式实用程序的示例：
<div class="d-none d-sm-block"> hidden-xs
<div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
<div class="d-none d-lg-block"> visible-lg and up (hidden-md and down)
<div class="d-none d-xl-block"> visible-xl </div>
</div>
</div>
</div>
<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>
<div class="d-xl-none"> hidden-xl (visible-lg and down)
<div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
<div class="d-md-none d-lg-none d-xl-none"> visible-sm and down (or hidden-md and up)
<div class="d-sm-none"> visible-xs </div>
</div>
</div>
</div>
回答by Vinod Chauhan
****Screen Size Class****
****屏幕尺寸等级****
-
——
Hidden on all.d-none
Hidden only on xs.d-none .d-sm-block
Hidden only on sm.d-sm-none .d-md-block
Hidden only on md.d-md-none .d-lg-block
Hidden only on lg.d-lg-none .d-xl-block
Hidden only on xl.d-xl-none
Visible on all.d-block
Visible only on xs.d-block .d-sm-none
Visible only on sm.d-none .d-sm-block .d-md-none
Visible only on md.d-none .d-md-block .d-lg-none
Visible only on lg.d-none .d-lg-block .d-xl-none
Visible only on xl.d-none .d-xl-block
隐藏在所有.d-none 上
仅隐藏在 xs.d-none .d-sm-block
仅隐藏在 sm.d-sm-none .d-md-block
仅隐藏在 md.d-md-none .d-lg-block
仅隐藏在 lg.d-lg-none .d-xl-block
仅隐藏在 xl.d-xl-none
在所有.d-block上可见
仅在 xs.d-block .d-sm-none上可见
仅在 sm.d-none .d-sm-block .d-md-none上可见
仅在 md 上可见.d-none .d-md-block .d-lg-none
仅在 lg.d-none .d-lg-block .d-xl-none上可见
仅在 xl.d-none .d-xl-block上可见
Refer this link http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
请参阅此链接http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
回答by jross
Bootstrap 4 (^beta) has changed the classes for responsive hiding/showing elements. See this link for correct classes to use: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
Bootstrap 4 (^beta) 更改了响应式隐藏/显示元素的类。请参阅此链接以获取要使用的正确类：http: //getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
回答by Limitless isa
Some version working
一些版本工作
<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>
