Question

我正在尝试为中型设备和向上隐藏元素。根据{{3}}我只需要将类hidden-md-up添加到相关元素中。这不行。但

请参阅下面的演示。我已经添加了类hidden-xs-up，即使我需要hidden-md-up，因为它更容易在jsfiddle视口中进行测试。

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

Answer 1

你快到了！

您只需将class="hidden-md"用于适合“中等”尺寸类别的视口。

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

同样hidden-xs代表小额，hidden-sm代表小型，hidden-lg代表大型等等。

希望这有帮助！

<强>更新
为了清楚起见 - （{当前）Bootstrap v4-alpha中hidden-md-up类只有。

OP正在引用v3，这些类尚不可用;因此需要设置隐藏的所有必要类 - 我在答案中反映了这一点。

Answer 2

hidden-*类已从Bootstrap 4 beta开始删除。

如果你想在中等和最高级别上使用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            |

不是使用显式的.visible- *类，而是创建一个元素通过简单地将其隐藏在该屏幕尺寸处可见。你可以结合起来一个.d- -none类，只有一个.d - -block类来显示一个元素在给定的屏幕大小间隔内（例如.d-none.d-md-block.d-xl-none 仅在中型和大型设备上显示该元素。）

文档here

Answer 3

hidden-md-up课程仅适用于Bootstrap 4，因此无法在你的小提琴中工作。这是一个Bootstrap 4示例：

http://www.codeply.com/go/baF57xPjuv

对于Bootstrap 3.x，您需要同时使用hidden-md和hidden-lg类：

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

隐藏元素用于中型和高级设备引导程序

3 个答案: