Bootstrap 4响应式工具可见/隐藏xs sm lg无效

Question

在迁移到Bootstrap 4时，使用新的响应式工具隐藏/可见类(hidden / visible classes)遇到了问题。我知道在v3中已经删除了.hidden-类，并且用.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，响应式设计模式），此示例中没有隐藏任何内容

- Yatko

---

你的问题是什么？（翻译自 https://stackoverflow.com/help/how-to-ask） - Rob

@Rob fair ;) 已更改。 - Yatko

您需要发布一个最小化的示例，以显示引起问题的标记：[mcve] 我们不知道“元素”是什么。 - Rob

设置一个包含Bootstrap 4和您的HTML示例的Codepen：https://codepen.io/esr360/pen/prWjYv。您声称“无论屏幕大小，此示例中没有隐藏任何内容”是不正确的。 - ESR

@EdmundReed 是的，这让我疯了：我尝试了一个简单的例子，在我的 Mac 上可以工作，在同步后立即停止工作...尝试了缓存，甚至使用不同的 ISP 来排除任何缓存问题。 - Yatko

Answer 1

在Bootstrap 4中，.hidden-*类已完全被移除（是的，它们被hidden-*-*替换，但这些类在v4 alpha版中也不存在）。

从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

文档

- Yatko

---

我找不到这个的原因是，v4 beta 几天前发布了，而所有 Google 索引的结果仍然会带你去 v4-alpha，不知何故我得到了 新 CDN 链接，但所有其他内容仍然是-alpha。 - Yatko

好的，我会尽力进行翻译。以下是需要翻译的内容：我 assume "d" = display。 - user20232359723568423357842364

为什么他们要引入这样一个不直观、有破坏性的变化？有任何解释吗？ - szaman

@rrrafalsz 我也曾想过同样的事情。这似乎是与之前α版中的“visible-sm-up/down”相比不必要的复杂倒退。了解原因会很有趣。 - Katai

你能否在你的示例中清楚地注释哪些DIV是可见的，哪些不可见？我花了一段时间，也不确定如果我注释了它是否正确。谢谢。 - helle

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

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

- Vinod Chauhan

---

虽然这理论上回答了问题，但最好在此处包含答案的基本部分，并提供参考链接。 - Rick

Answer 3

Bootstrap 4 (^beta)已经更改了响应式隐藏/显示元素的类。请参考此链接以获取正确的类名： http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

- jross

---

感谢您。Bootstrap 至少可以将旧内容删除并归档，以便像我这样的新手不必在找到 stack 的答案之前浏览 123523532 种可能的解决方案。在过去的几年里，stack overflow 比 Google 更有用，所以当有人说要使用 Google 时...我会说不，用 stack...更快更有用。 - Blue

Answer 4

Bootstrap 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>

*新的额外超大 XXL ≥1400 像素断点

- Yatko

---

使用 CSS 辅助工具玩得很棒，目标达成！ - Fernando Torres

我无法将d-inline与任何d-xx-block类一起使用。有人解决了这个问题吗？例如：d-inline-block、d-none、d-sm-block。 - Donny V.

Answer 5

某些版本可以工作

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

- Limitless isa