问题描述
在迁移到 Bootstrap 4 时,新的响应实用程序隐藏/可见类出现问题.我知道.hidden-类已从v3中删除并替换为 .hidden-*-up
.hidden-*-down
.使用新的.hidden-*-up.hidden-*-down
类,但元素未更改为可见/隐藏.不知道为什么.
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>
* 在此示例中,屏幕大小(Safari,自适应设计模式)均不隐藏任何内容
推荐答案
使用Bootstrap 4 .hidden-*
类已完全删除(是的,它们已由hidden-*-*
替换,但这些类也已消失来自v4 alphas).
With Bootstrap 4 .hidden-*
classes were completely removed (yes, they were replaced by hidden-*-*
but those classes are also gone from v4 alphas).
从v4-beta开始,您可以组合.d-*-none
和.d-*-block
类以达到相同的结果.
Starting with v4-beta, you can combine .d-*-none
and .d-*-block
classes to achieve the same result.
可见-*也已删除;不要使用显式的.visible-*
类,而应通过不隐藏元素来使其可见(再次,使用.d-none .d-md-block的组合).这是工作示例:
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"
变为class="d-none d-sm-block"
(或 d-done 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>
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
- codepen.io/_yatko/pen/ZJXQxy
这篇关于bootstrap 4响应实用程序可见/隐藏的xs sm lg不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!