Html Can'；无法理解此Bootstrap4显示属性组合

我正在为我的web应用程序使用Bootstrap4。现在，仅当设置了

lg

（大）屏幕尺寸时，我才需要显示菜单

文档非常清楚：有一个类可以在任何屏幕大小上隐藏元素：

d-无

还有一些类可以在给定的屏幕大小上显示元素（

xs

，

sm

，

md

，

lg

和

xl

）：

.d-{sm，md，lg，xl}-块

我的理由是，如果我只想在大屏幕上显示一个元素，我应该使用两个类：

.d-none.d-lg-block

第一个隐藏所有尺寸的元素，然后仅“提升”lg元素。但是如果我看一下文档，它说为了实现这一点，我需要使用一个额外的类，引用文档：

---

这是非常令人困惑的。为什么需要额外的

.d-xl-none

类？

因为

xl

比

lg

屏幕大。如果你不写class

d-xl-none

你的块会在比

lg

更大的屏幕上可见，所以基本上“lg”屏幕大小不是大小的“封闭范围”，而是一个右无界范围，对吧？

lg

所有屏幕的宽度都大于992px，

xl

所有屏幕的宽度都大于1200px。如果您将写入

d-none d-lg-block d-xl-none

则表示“当屏幕宽度大于992px且小于1200px时显示我的块”。如果您将写入

d-none d-lg-block

则表示“当屏幕宽度大于992px时显示我的块”