Bootstrap 4 beta - 如何仅为sm显示div？

Question

在Bootstrap alpha 6中，我可以写这个，只为div显示div的内容：

<div class="hidden-md-up hidden-xs-down">
   This would only show for sm in Bootstrap 4 alpha 6.
</div>

这在Bootstrap 4测试版中不再有用。

如何使用bootstrap 4 beta显示sm的div内容？

Answer 1

我相信您正在寻找display属性。

<div class="d-xl-none d-lg-none d-md-none d-sm-block d-xs-none">This would only show for sm</div>

这将仅显示sm的div。

Answer 2

@styfle使用display properties是对的。但请记住，它首先是移动设备，因此请从xs开始，然后选择md，lg ......

如果我们只想显示在sm：

• 首先，我们不希望将其放在xs中，因此我们需要将其放在d-none处（将其范围视为@media (min-width: 0px)）。
• 其次我们希望在sm中显示它，因此请使用d-sm-block（范围：@media (min-width: 576px)）显示它。
• 第三，我们不希望在md中将其放入d-md-none（范围：@media (min-width: 768px)），
• （第四，不再需要，因为d-md-none已经涵盖lg和xl的案例。）

所以我们得到了：

<div class="d-none d-sm-block d-md-none">
   This would only show for sm in Bootstrap 4 Beta
</div>

另一个例子：
仅在sm和lg中显示。

<div class="d-none d-sm-block d-md-none d-lg-block d-xl-none">
    This would only show for sm and lg in Bootstrap 4 Beta
</div>