要获取网格断点值，我们可以使用 bootstrap 的 display 属性。使用响应式显示实用程序类更改显示属性的值。可以根据需要组合类以产生不同的影响。
- .d-{value}为 xs
- .d-{breakpoint}-{value}用于 xl、lg、md 和 sm。
这里的值可以是其中之一，例如 none、inline、inline-block、block、table、table-cell、table-row、flex、inline-flex。
媒体查询会影响具有给定断点或更大断点的屏幕宽度。例如， .d-md-none设置显示：none;在 md、lg 和 xl 屏幕上。
网格断点是
- xs: <576px超小工具(人像手机，小于 576px)。
- sm: >=576px小工具(横向手机，576px 及以上)。
- md: >=768px中型小工具(平板电脑，768px 及以上)。
- lg: >=992px大型小工具(桌面，992px 及以上)。
- xl: >=1200px超大小工具(大型桌面，1200px 及以上)。
要掩盖组件，请使用.d-none类或.d-{sm, md, lg, xl}-none类之一用于任何响应式屏幕品种。
要在给定的屏幕尺寸间隔上显示组件，您将能够将一个.d-*-none类与一个.d-*-* 类结合起来，用于说明.d-none .d-md-block .d-xl-none将覆盖所有屏幕尺寸的组件，中型和大型设备除外。
示例 1：
HTML
bootstrap4 | grid-breakpoint
GeeksforGeeks
Visible on all screen-size
Only Visible on xs (less
than 576px) screen-size
Only Visible on sm (767px to
576px) screen-size
Only Visible on md (991px
to 768px) screen-size
Only Visible on lg (1199px
to 992px) screen-size
Only Visible on xl (>=1200px)
screen-size
HTML
Bootstrap4 grid-breakpoint
GeeksforGeeks
Visible on all screen-size
Hidden on xs (less than
576px) screen-size
Hidden on sm (767px and
less) screen-size
Hidden on md (991px and
less) screen-size
Hidden on lg (1199px and
less) screen-size
Hidden only on xl (1200px
and up) screen-size
输出：
示例 2：
HTML
Bootstrap4 grid-breakpoint
GeeksforGeeks
Visible on all screen-size
Hidden on xs (less than
576px) screen-size
Hidden on sm (767px and
less) screen-size
Hidden on md (991px and
less) screen-size
Hidden on lg (1199px and
less) screen-size
Hidden only on xl (1200px
and up) screen-size
输出：
