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

Posted 2023-02-21

【中文标题】bootstrap 4 响应式实用程序可见/隐藏 xs sm lg 不工作

【英文标题】：bootstrap 4 responsive utilities visible / hidden xs sm lg not working

【发布时间】：2018-01-21 19:52:33

【问题描述】：

迁移到 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，响应式设计模式），此示例中都没有隐藏任何内容

【问题讨论】：

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

@Rob fair ;) 改变了。

您需要发布导致问题的标记的最小示例：minimal reproducible example 我们不知道“元素”是什么。

设置一个包含 Bootstrap 4 和您的 html 示例的代码笔：codepen.io/esr360/pen/prWjYv。您声称“无论屏幕大小如何，此示例中都没有隐藏任何内容”是不正确的。

@EdmundReed 是的，它让我发疯：我尝试了一个简单的例子，在我的 Mac 上工作，在同步后立即停止工作......尝试缓存，甚至是不同的 ISP 以排除任何缓存

【参考方案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

Documentation

【讨论】：

我找不到这个的原因，v4 beta 几天前发布了，所有谷歌索引的结果仍然把你带到 v4-alpha，不知何故我得到了new CDN 链接，但所有rest 仍然是 -alpha

我假设 "d" = display.

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

@rrrafalsz 我想知道同样的事情。这似乎是从他们在 alpha 中的先前“visible-sm-up/down”倒退了一个不必要的复杂步骤。知道原因会很有趣。

您能否在您的示例中清楚地评论一下，哪些 DIV 是可见的，哪些不可见？我花了一段时间，我不确定如果我评论它是否正确。谢谢

【参考方案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-block

仅在 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

【讨论】：

虽然这在理论上可以回答问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。

【参考方案3】：

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

【讨论】：

谢谢。 Bootstrap 至少可以删除旧内容以存档，因此在堆栈中找到此答案之前，所有新手（如我自己）不必遍历 123523532 个可能的解决方案。在过去的几年里，堆栈溢出比谷歌更有用，所以当人们说使用谷歌时......我说不，使用堆栈......更快更有用。

【参考方案4】：

某些版本工作

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

【参考方案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>

*新的 Extra Extra large xxl ≥1400px 断点

【讨论】：

与 css 助手一起玩的好目标

我无法让 d-inline 与任何 d-xx-block 类一起工作。有人想出这个吗？例如d-inline-block d-none d-sm-block