在迁移到 Bootstrap 4 时遇到新的响应式实用程序隐藏/可见类的问题.我知道 .hidden- 类已从 v3 中删除并替换为.hidden-*-up .hidden-*-down.使用新的 .hidden-*-up.hidden-*-down 类，但元素不会更改为可见/隐藏.不知道为什么.
<span class="vcard">…</span><div class="col hidden-lg-down"><div class="hidden-sm-down">…
<div class="hidden-xs-down">…
* 无论屏幕大小如何(Safari、响应式设计模式)，此示例中均未隐藏任何内容
With Bootstrap 4 .hidden-* 类被完全删除(是的，它们被替换为 hidden-*-* 但这些类也从 v4 alphas 中消失了).
从 v4-beta 开始，您可以组合 .d-*-none 和 .d-*-block 类来实现相同的结果.
visible-* 也被移除；不要使用显式的 .visible-* 类，而是通过不隐藏元素来使其可见(再次使用 .d-none .d-md-block 的组合).这是工作示例:
<span class="vcard">…</span><div class="col d-none d-xl-block"><div class="d-none d-md-block">…
<div class="d-none d-sm-block">…
class="hidden-xs" 变为 class="d-none d-sm-block"(或 d-none d-sm-inline-block) ...
hidden-xs</span><span class="d-none d-sm-inline-block">hidden-xs</span>Bootstrap 4 响应式实用程序的示例:
隐藏-xs<div class="d-none d-md-block">可见 md 和向上(隐藏 sm 和向下)<div class="d-none d-lg-block">可见-lg 和向上(隐藏-md 和向下)<div class="d-none d-xl-block">可见-xl </div><div class="d-sm-none">超小 <576px </div><div class="d-none d-sm-block d-md-none d-lg-none d-xl-none">小 ≥576px </div><div class="d-none d-md-block d-lg-none d-xl-none">中 ≥768px </div><div class="d-none d-lg-block d-xl-none">大尺寸≥992px </div><div class="d-none d-xl-block">超大 ≥1200px </div><div class="d-xl-none">hidden-xl (visible-lg 和 down)<div class="d-lg-none d-xl-none">可见-md 和向下(隐藏-lg 和向上)<div class="d-md-none d-lg-none d-xl-none">可见 sm 和向下(或隐藏 MD 和向上)<div class="d-sm-none">可见-xs </div>
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 replaced with .hidden-*-up .hidden-*-down. Using the new .hidden-*-up.hidden-*-down classes but the elements aren't changing to visible/hidden. Can't figure out why.
<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)
With Bootstrap 4 .hidden-* classes were completely removed (yes, they were replaced by hidden-*-* but those classes are also gone from v4 alphas).
Starting with v4-beta, you can combine .d-*-none and .d-*-block classes to achieve the same result.
visible-* was removed as 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:
<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) ...
<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:
<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>
这篇关于bootstrap 4 响应式实用程序可见/隐藏 xs sm lg 不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！