Question

迁移到 Bootstrap 4 时，新响应实用程序隐藏/可见类出现问题。我知道.hidden-类已removed from v3 and replaced .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

****屏幕尺寸类别****

-

全部隐藏 .d-none
仅在xs上隐藏。d-none.d-sm-block
仅在sm上隐藏 .d-sm-none .d-md-block
仅隐藏在md 上。d-md-none .d-lg-block
仅隐藏在lg 上。d-lg-none.d-xl-block
仅隐藏在xl .d-xl-none
全部可见 .d块
仅在xs上可见。d-block.d-sm-none
仅在sm上可见 .d-none .d-sm-block .d-md-none
仅在md上可见。d-none.d-md-block .d-lg-none
仅在lg上可见。d-none.d-lg-block .d-xl-none
仅在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

Answer 4

某些版本正常运作

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

Answer 5

引导程序 v5.0 +

<div class="d-xs-block d-sm-none">xs <576px</div>
<div class="d-none d-sm-block d-md-none">sm ≥576px</div>
<div class="d-none d-md-block d-lg-none">md ≥768px</div>
<div class="d-none d-lg-block d-xl-none">lg ≥992px</div>
<div class="d-none d-xl-block d-xxl-none">xl ≥1200px</div>
<div class="d-none d-xxl-block">xxl ≥1400px</div>

*new 超大 xxl ≥1400px 断点

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

5 个答案: