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

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

这只会在引导4 alpha 6中显示sm。

这在Bootstrap4测试版中不再有效

---

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

我相信您正在寻找属性

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

这将仅显示

sm

的div。

@style使用正确。但请记住，它首先是移动的，所以从

xs

开始，然后再从

md

，

lg

开始

如果我们只想在

sm

中显示：

• 首先，我们不想将它放在

  xs

  中，因此我们需要将它与

  d-none

  一起放到那里（将其范围想象为

  @介质（最小宽度：0px）

  ）
• 其次，我们希望它位于

  sm

  中，因此使用

  d-sm-block

  （范围：

  @media（最小宽度：576px）

  ）将其显示在那里
• 第三，我们不想将它放在

  md

  中，所以将它与

  d-md-none

  一起放在那里（范围：

  @media（最小宽度：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>

---

我相信正确的做法是添加这三个类：d-none d-md-block d-lg-noneI更新了我的答案，包括

xl

和

lg

。这应该适用于所有屏幕大小，因此只有

sm

可见。您忘了xs吗？我的意思是，如果只显示sm，你应该隐藏xs。是的，“xs”有效。所以“隐藏的md-down”被替换为“d-xl-block d-lg-block d-md-none d-sm-none d-xs-none”（然后被埋藏在文档中，作为引导神对并排相同div和可能其他不纯洁思想的惩罚）。@stylt缺少的。d-xs-none类似乎是一个Beta1设计缺陷。参见github.com/twbs/bootstrap/issues/23475

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