Bootstrap 4 如何使用Bootstrap 4 Beta在小屏幕上隐藏元素

我刚从Bootstrap4Alpha升级到beta，但我现在不知道如何在小屏幕上隐藏元素。在alpha中，这是“隐藏的md向上”和“隐藏的sm向下”，效果非常好。“隐藏md up”现在是“d-md-none”，但另一个我无法工作

<div class="d-md-block d-xs-none d-sm-none">Show on large screen only - NOT working for me</div>
<div class="d-md-none">Show on small screen only</div>

仅在大屏幕上显示-不适用于我
仅在小屏幕上显示

---

有什么想法吗？

休息一会儿，喝杯咖啡，后来我想出来了：加上“d-none d-md-block”这个类就行了

<div class="d-none d-md-block">Show on large screen only works now</div>
<div class="d-md-none">Show on small screen only</div>

现在只在大屏幕上显示
仅在小屏幕上显示

---

阅读更多关于响应式显示实用程序的信息。

我只是将此作为一个答案添加，因为评论太长了……这是对@Kian的回复

由于

bootstrap

[4]是“移动优先”，您可以从那里开始

所以问题是，“您想在XS断点上显示这个吗？”

• 如果是，则不需要d-*类，因为它将显示在XS和所有尺寸上 更大
• 如果没有，则执行

  d-none

当您移动到下一个断点[SM]时，问问自己，“我想在SM断点上显示这个吗？”

• 如果是，并且它也显示为XS，则没有更改
• 如果是且XS被隐藏（使用

  d-none

  ），则需要执行以下操作

  d-sm-block

• 如果显示no和XS，则执行

  d-sm-none

• 如果隐藏了no和XS，则不会进行任何更改

对于显示属性不同于上一个/更小的

断点的较大的
断点
重复冲洗

以下是一些例子：

<div class="d-none d-md-block">Show on medium, and bigger, screen sizes</div>
<div class="d-md-none">Show on extra small and small screen sizes</div>
<div class="d-none d-md-block d-lg-none">Show on ONLY medium screen sizes</div>
<div class="d-none d-sm-block d-md-none d-xl-block">Show on ONLY small and extra large screen sizes</div>

在中等或更大的屏幕上显示
在超大和小屏幕上显示
仅在中等屏幕尺寸上显示
仅在小屏幕和超大屏幕上显示

我试图使用d-properties在不同的断点中显示不同的徽标，我尝试了d-none d--block“，但它不起作用，只起作用d-none-。然后我意识到我正在将该类应用于.img。因此，您可以对任何元素使用d-none-*（隐藏），但显示元素d-*-block只在像div这样的包装器元素中起作用。
我希望这能有所帮助。
回答自己的问题不仅可以接受，而且在堆栈溢出时也会受到鼓励。回答问题的人并不重要，只是答案正确且解释得当。但是，你关于每个人都讨厌回答自己问题的人的愚蠢笑话/问题应该被忽略。谢谢你的回答官方文件没有提到新方法与旧方法相比是如何工作的。事实上，我仍然有点不明白为什么d-md-none和隐藏的md-up是一样的（这对我来说是有意义的）d-none和d-md-block需要如何一起使用，以及d-none和d-md-block中的block在这种上下文中的含义。我同意，版本3更直观。类名对您想要做的事情有意义。@Kian我将尝试解释。既然引导[4]是“移动优先”，您就从那里开始。所以问题是，“是否要在XS断点上显示此项？“如果是，则不需要d-*类，因为它将显示在XS和所有更大的大小上。如果否，则执行d-none。当移动到下一个断点[SM]时，问问自己，“我是否要在SM断点上显示此项？”。如果是，并且它也显示在XS上，则不需要更改。如果是，则XS被隐藏（使用d-none），则需要执行“d-sm-block”。对于显示属性不同于上一个/较小断点的较大断点，重复此操作