Bootstrap 4 引导4-隐藏类-仅在小屏幕上隐藏

如何仅在小型（sm）屏幕上隐藏

span

内容？我需要此内容在

xs

屏幕上可见

<span class="hidden-sm-down">Text</span>

文本

---

有一种方法可以做到这一点，是否只使用引导类？

再次阅读文档时发现，使用引导类可能无法实现这一点，必须由我自己完成

所以我最后做了这个：

从引导和导入的

mixin

和

变量


@映射键中的每个$bp（$grid断点）{
.visible-#{$bp}-up{
@包括媒体断点（bp）{
显示：块！重要；
}
}
.visible-#{$bp}-向下{
@包括媒体断点关闭（$bp）{
显示：块！重要；
}
}
}
Bootstrap 4即将更新，将启用单个视口上的隐藏（
hidden-x
）


所有可见性类都将在此更新中进行修改


升级Bootstrap 4 Beta版

如果要在Bootstrap 4中隐藏特定层（断点）上的元素，请相应地使用
d-*
显示类。请记住，
xs
是默认（始终隐含）断点，除非被更大的断点覆盖



hidden xs down
=
d-none d-sm-block
hidden sm down
=
d-none d-md-block
hidden md down
=
d-none d-lg-block
hidden lg down
=
d-none d-xl-block
hidden xl down
=
d-none
（与
hidden
相同）
hidden xs
（仅限）=
d-none d-sm-block
（与
hidden xs down
相同）
隐藏sm
（仅限）=
d-block d-sm-none d-md-block
隐藏md
（仅限）=
d-block d-md-none d-lg-block
hidden lg
（仅限）=
d-block d-lg-none d-xl-block
隐藏xl
（仅限）=
d-block d-xl-none


还请注意，
d-*-block
可以替换为
d-*-inline
，
d-*-flex
等。。取决于图元的显示类型。有关使用Bootstrap 4 Beta 1的更多信息，您可以仅使用
d-block d-sm-none d-md-block
隐藏
sm

这很容易。您需要知道的是，如何正确使用Bootstrap4类

参考：

首先，把它分成三个有序的组。（当某组不适用时，省略该组）

（隐藏下限）
：只有一个类
。d-none

（显示大小）
：显示（不隐藏）的大小，例如：
.d-sm-block
，
.d-md-block
。它的格式为
.d--block

（隐藏上限）
：应隐藏的上限。其格式为
.d--none


让我们看一些例子

Q1：显示在
md
和更大屏幕上

答复：

从可见屏幕大小开始，
（显示大小）
：
.d-md-block

然后考虑所有应该隐藏的屏幕大小，即所有屏幕大小


小于
md
隐藏，
（隐藏下限）
：
.d-none
大于
md
未隐藏，
（隐藏上限）
：


d-none d-md-block

Q2：显示在
sm
和更小的屏幕上

答复：
（显示大小）
：
.d-sm-block

隐藏屏幕大小


小于
sm
未隐藏，
（隐藏下限）
：

大于
sm
隐藏，
（隐藏上限）
：
.d-md-none

d-sm-block d-md-none

问题3：仅在
sm
和
md
中可见

答复：
（显示大小）
：
.d-sm-block.d-md-block

隐藏屏幕大小


小于
sm
隐藏，
（隐藏下限）
：
.d-none
大于
sm
隐藏，
（隐藏上限）
：
.d-lg-none

d-none d-md-block d-sm-block d-lg-none

欢迎来到，在你发布问题之前，尝试在这里和谷歌搜索。你可以去搜索
@media
并研究它。你好@Alex，谢谢你的回复。我做了搜索，但没有找到任何有用的信息，我想这是因为引导4是在阿尔法尚未找到。我还阅读了，并意识到它们只提供了一种只在某些屏幕分辨率下显示的方式。因此，如果您能再次阅读这些文档，我将不胜感激。这些文档可能无法使用引导类实现，必须由我自己完成。无论如何，谢谢您，如果您只是想在xs屏幕上显示一个跨度，您就不能使用
？docs:谢谢你回复@Asher，但我使用的是Bootstrap v4，而且没有可见的类*

因此，根据这里的表格：

隐藏的sm up

仅在xs设备上显示。我猜这不起作用。它按预期工作，但不符合我的需要，因为我需要它只能隐藏在小屏幕上。可以在此处找到正式文档：

(hide_lower_limit) (display_size) (hide_upper_limit)