logo标签列表

如何在Bootstrap 4 Beta中隐藏小屏幕上的元素

bootstrap-4
12

我刚从Bootstrap 4 alpha版本升级到beta版本，但是我现在无法想出如何在小屏幕上隐藏一个元素。在alpha版本中，可以使用"hidden-md-up"和"hidden-sm-down"轻松实现。"hidden-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>

有什么想法吗？

4个回答
38

短暂休息，喝杯咖啡后我想到了：添加类“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>

请阅读Bootstrap 4 文档，了解响应式显示实用程序的更多信息。

3
在Stack Overflow上，自己回答自己的问题不仅是可以接受的，而且是鼓励的。重要的是回答正确并且有恰当的解释，而不是谁来回答问题。然而，您提出的关于每个人都讨厌自己回答问题的无聊玩笑/问题应该被忽略掉。 - Mario
1
感谢您的回答。官方文档没有提到新方法与旧方法的区别。我仍然有点困惑为什么d-md-none与hidden-md-up相同（这对我来说是有意义的），以及d-none和d-md-block需要如何一起使用，以及d-none和d-md-block中的块在此上下文中的含义是什么。 - Kian
1
我同意，版本3更加直观。类名与你想要做的事情相符合。 - Leo Muller
1
@Kian 我来试着解释一下。由于bootstrap [4]是“移动优先”的，所以你从那里开始。所以问题是，“你想在XS断点上显示这个吗？”如果是，就不需要d-*类，因为它将在XS和所有更大的尺寸上显示。如果不是，则需要d-none。当你移动到下一个断点[SM]时，请问自己，“我想在SM断点上显示这个吗？”如果是，并且它也在XS上显示，则无需更改。如果是，并且XS被隐藏了（使用d-none），则需要进行“d-sm-block”。对于每个比前一个/较小的断点显示属性不同的更大的断点，重复此操作。 - ganders
9

我将其作为答案添加，因为它对于评论来说太长了......这是针对@Kian的回复。

由于bootstrap [4]是“移动优先”的，因此您从那里开始。

所以问题是，“您是否想在XS断点上显示此内容？”：

  • 如果是，则不需要d- *类，因为它将显示在XS和所有更大的尺寸上。
  • 如果不是，则需使用d-none。

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

  • 如果是并且它也在XS上显示，则无需更改。
  • 如果是并且XS被隐藏（使用d-none），则需要使用d-sm-block。
  • 如果不是并且XS已显示，则需使用d-sm-none。
  • 如果不是并且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>

这是一个 JSFiddle

0
我试图使用d属性在不同的断点显示不同的标志，我尝试了"d-none d--block"，但它没有起作用，只有"d-none-"才有效果。然后我意识到我将类应用于了.img。因此你可以对任何元素使用d-none-*（隐藏），但要显示元素，d-*-block仅在包装元素（例如div）中起作用。 希望能对你有所帮助。
0
在Bootstrap 5中，你可以使用这个方法来更容易地确定你正在使用的Bootstrap尺寸： 
<div style="display:block;text-align:center;">
    Grid: 
    <span class="d-none d-inline d-sm-none">XS</span>
    <span class="d-none d-sm-inline d-md-none">SM</span>
    <span class="d-none d-md-inline d-lg-none">MD</span>
    <span class="d-none d-lg-inline d-xl-none">LG</span>
    <span class="d-none d-xl-inline d-xxl-none">XL</span>
    <span class="d-none d-xxl-inline">XXL</span>

</div>
这将显示当前尺寸（XS/SM/MD/LG/XL/XXL），并隐藏其他尺寸。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，