bootstrap 4响应实用程序可见/隐藏xs sm lg无法正常工作

Question

迁移到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>

*无论屏幕大小如何,此示例中都不隐藏任何内容(Safari,响应式设计模式)

Answer 1

使用Bootstrap 4个.hidden-* 类被完全删除(是的,它们被替换为hidden-*-*但是这些类也从v4 alphas中消失了).从v4-beta开始,您可以组合.d-*-none和.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"(或d-none d-sm-inline-block)......

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

Answer 2

****屏幕尺寸等级****

-

1. 隐藏在所有 .d-none上

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

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

4. 仅在md .d-md-none .d-lg-block 上隐藏

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

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

7. 在所有 .d-block 上都可见

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

9. 仅在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 上可见

请参阅此链接http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Answer 3

Bootstrap 4（^ beta）更改了用于响应式隐藏/显示元素的类。请参阅此链接以获取要使用的正确类：http : //getbootstrap.com/docs/4.0/utilities/display/#hiding-elements