Bootstrap 4 beta - 如何仅针对 sm 屏幕显示 div？

Question

在 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 beta中，此方法已不再适用。

如何在Bootstrap 4 beta中显示仅针对sm屏幕大小的div内容？

- brinch

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的

。

- styfle

---

我认为正确的做法是添加这三个类：d-none d-md-block d-lg-none。 - brinch

文档中据我所知没有提到 xs，但也许这是一个疏忽。 - styfle

是的，“xs”可行。因此，“hidden-md-down”被替换为“d-xl-block d-lg-block d-md-none d-sm-none d-xs-none”（然后被埋在文档中，作为Bootstrap神灵对于并排相同div和可能存在的其他不纯思想的惩罚）。 - Paul Brady

@styfle 更正！实际上不存在 .d-xs-none。非常抱歉...在允许时我会更新我的评论。 - Paul Brady

@styflt 缺失的 .d-xs-none 类似乎是 Beta1 设计上的一个 bug。请参见 github.com/twbs/bootstrap/issues/23475。 - Paul Brady

Answer 2

@styfle使用显示属性是正确的。但请记住，一切都是以移动设备为先，所以从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>

- illnr