如何隐藏与引导4测试版在小屏幕元素

Question

我刚刚从引导4阿尔法测试感动，但我无法弄清楚如何去掩饰在小屏幕上的元素。在阿尔法，这是“隐藏-MD-up”和它的工作精美的“隐藏SM-下来”。 “隐藏-MD-UP”现在是“d-MD-无”，但另外一个我不能去工作

<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-无d-MD-块”会做的伎俩

<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 Documentation响应显示工具。

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>

Here's a fiddle

Answer 3

我试图使用d-化子性质显示diffentes标识在型动物断点，我试过d-无d - 块”，但它没有工作，只能d-无 - 后来我才意识到，我是底肥的一流的.IMG所以，你可以使用d-无 - *（隐藏）的任何元素，但显示元素d - * - 块只有在像DIV包装元素工作，我希望它帮助。