bootstrap 4响应实用程序可见/隐藏的xs sm lg不起作用

96

迁移到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，响应式设计模式）都不会隐藏任何内容

— 矢子
source

2

你的问题是什么？stackoverflow.com/help/how-to-ask

— Rob

@Rob fair;）已更改。

— Yatko '17

您需要张贴一个导致问题的标记的最少示例：最少可重复的示例我们不知道“元素”是什么。

— 罗布

设置一个包含Bootstrap 4和您的HTML示例的codepen：codepen.io/esr360/pen/prWjYv。您关于“无论屏幕大小如何，在此示例中都不会隐藏任何内容”的说法是错误的。

— ESR

@EdmundReed是的，它让我发疯：我尝试了一个简单的示例，在我的Mac上运行，在同步后立即停止工作...尝试了缓存，甚至使用了其他ISP来排除任何缓存

— Yatko

227

随着Bootstrap 4 .hidden-* 类的完全删除（是的，它们被替换了，hidden-*-*但是这些类也从v4 alphas中消失了）。

从v4-beta开始，您可以合并.d-*-none和.d-*-block类以达到相同的结果。

visible- *也被删除；而不是使用显式.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）...

<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

文献资料

— 矢子
source

1

我找不到此原因的原因是，几天前发布了v4 Beta，并且所有Google索引结果仍将您带到v4-alpha，以某种方式我获得了新的CDN链接，但其余所有内容仍为-alpha

— Yatko

2

我假设“ d” = display。

— user20232359723568423357842364'9

16

他们为什么要引入如此直观，突破性的变化？有什么解释吗？

— szaman

3

@rrrafalsz我想知道同样的事情。从先前在alpha中进行的“可见的sm上/下”操作看来，这似乎是不必要的复杂步骤。知道原因会很有趣。

— 卡泰

您能否在示例中明确说明，哪些DIV是可见的，哪些不是？我花了一段时间，如果我发表评论，我不确定是否正确。谢谢

— 你好

51

屏幕尺寸等级

--

隐藏在所有 .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

4.5链接：https：//getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

— 维诺德·乔汉（Vinod Chauhan）
source

1

虽然从理论上讲这可以回答问题，但最好在此处包括答案的基本部分，并提供链接以供参考。

— 瑞克

6

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

— 乔斯
source

2

谢谢。Bootstrap至少可以删除旧内容以进行存档，因此总的菜鸟（例如我自己）不必在堆栈中找到此答案之前就去解决123523532可能的解决方案。在过去的几年中，堆栈溢出比Google有用，所以当人们说使用google ...我说不，使用堆栈..更快，更有用。

— 蓝色

0

某些版本有效

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

— 无限ISA
source