Bootstrap 4 beta - 如何仅显示 sm 的 div？答案

【问题标题】：Bootstrap 4 beta - how to display div for sm only?Bootstrap 4 beta - 如何仅显示 sm 的 div？
【发布时间】：2018-01-21 17:27:23
【问题描述】：

在 Bootstrap alpha 6 中我可以这样写，让 div 的内容只显示给 sm：

<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 内容？

【问题讨论】：

【解决方案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。

【讨论】：

我相信正确的做法是添加所有这三个类：d-none d-md-block d-lg-none
我更新了我的答案以包括 xl 和 lg。这应该适用于所有屏幕尺寸，因此只有 sm 可见。
你没有忘记xs吗？我的意思是你应该隐藏 xs，如果只显示 sm。
是的，“xs”有效。所以...“hidden-md-down”被替换为“d-xl-block d-lg-block d-md-none d-sm-none d-xs-none”（然后埋在文档中，作为惩罚来自 Bootstrap 之神，用于并排相同的 div 和可能其他不纯的想法）。
@styflt 缺少的 .d-xs-none 类似乎是 Beta1 设计错误。见 github.com/twbs/bootstrap/issues/23475

【解决方案2】：

@styfle 使用display properties 是正确的。但请记住，它首先是移动设备，所以从 xs 开始，然后使用 md、lg...

如果我们只想在sm中显示：

所以我们得到：

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

【讨论】：