Bootstrap 4响应实用程序可见/隐藏 xs sm lg 不工作

使用 Bootstrap 4 .hidden-* 课程被完全移除(是的，它们被 hidden-*-*取代了，但是那些类也从 v4 alpha 中消失了)。

从 v4-beta 开始，您可以组合 .d-*-none和 .d-*-block类来实现相同的结果。

也删除了 ; 不使用显式的 .visible-*类，而是通过不隐藏元素使元素可见(再次使用。没有。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"(或 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>

引导程序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

文件

Bootstrap 4(^ beta)更改了响应性隐藏/显示元素的类

有些版本还行

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>

屏幕尺寸类别

-

1. 隐藏在所有 。 d-无

2. 只隐藏在 xs . d-none. d-sm-block 上

3. 只隐藏在 sm . d-sm-none. d-md-block 上

4. Hidden only on md .d-md-none .d-lg-block

5. 只隐藏在 lg . d-lg-none. d-xl-block 上

6. 只隐藏在 xl . d-xl-none 上

7. Visible on all .d-block

8. 仅在 xs . d-block. d-sm-none 上可见

9. Visible only on sm .d-none .d-sm-block .d-md-none

10. 只能在 md . d-none. d-md-block. d-lg-none 上可见

11. 只能在 lg . d-none. d-lg-block. d-xl-none 上可见

12. 仅在 xl . d-none. d-xl-block 上可见