css - 隐藏中型和高端设备 Bootstrap 的元素

Question

我正在尝试为中型及以上设备隐藏一个元素。根据bootstrap docs我只需要将类 hidden-md-up 添加到有问题的元素中。但这行不通。

请看下面的演示。我添加了 hidden-xs-up 类，尽管我需要 hidden-md-up 因为它更容易在 jsfiddle 视口(viewport)中进行测试。

演示 https://jsfiddle.net/DTcHh/21979/

<img src="http://placehold.it/350x150" class="hidden-md-up" />

Answer 1

hidden-* 类从 Bootstrap 4 beta 开始被移除。

如果你想在 medium 和 up 上显示使用 d-* 类

例如:

<div class="d-none d-md-block">This will show in medium and up</div>

如果你想只显示在小和下面使用这个

   <div class="d-block d-md-none"> This will show only in below medium form factors</div>

屏幕尺寸和等级图表

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

Rather than using explicit .visible-* classes, you make an element visible by simply not hiding it at that screen size. You can combine one .d--none class with one .d--block class to show an element only on a given interval of screen sizes (e.g. .d-none.d-md-block.d-xl-none shows the element only on medium and large devices).

文档 here