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

Question

我刚从bootstrap 4 alpha转到beta版,但我现在无法弄清楚如何在小屏幕上隐藏元素.在alpha中,这是"隐藏的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>

有任何想法吗？

Answer 1

短暂的休息,一杯咖啡后来我明白了:添加"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文档中有关响应式显示实用程序的更多信息.

Answer 2

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

由于bootstrap[4] 是“移动优先”，所以你从那里开始。

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

• 如果是，则不需要 d-* 类，因为它将显示在 XS 上并且所有尺寸都更大。
• 如果没有，那么做d-none。

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

• 如果是并且它也显示为 XS，则没有变化。
• 如果是并且 XS 被隐藏（使用d-none），那么您需要执行 d-sm-block.
• 如果没有并且显示 XS，则执行d-sm-none.
• 如果没有并且 XS 被隐藏，则没有变化。

对每个breakpoint较大的重复冲洗，其中显示属性与前一个/较小的不同breakpoint

这里有些例子：

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

这是一把小提琴