使用新的响应式实用程序时遇到问题隐藏/可见类,当迁移到引导程序4。我知道 .hidden- 类已经从 v3 中删除并替换 with .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>
* 无论屏幕尺寸如何(Safari,响应式设计模式),此示例中都没有隐藏任何内容
使用引导程序 4.hidden-*
类被完全删除(是的,它们被替换为hidden-*-*
但这些类也从 v4 alpha 中消失了)。
从 v4-beta 开始,您可以结合.d-*-none
and .d-*-block
类来达到相同的结果。
可见-* 已删除以及;而不是使用显式的.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"
变成class="d-none d-sm-block"
(or d-无 d-sm-内联块) ...
<span class="d-none d-sm-inline">hidden-xs</span>
<span class="d-none d-sm-inline-block">hidden-xs</span>
一个例子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>
- codepen.io/_yatko/pen/ZJXQxy
文档
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)