bootstrap 5 visibility hidden

Bootstrap 5是一个用于创建响应式、移动优先的网站的前端框架。在 Bootstrap 5 中,可以使用类 .d-none 和 .d-{sm,md,lg,xl}-none 来隐藏元素。

.d-none 类可以在任何屏幕大小下隐藏元素,而 .d-{sm,md,lg,xl}-none 则可以在特定的屏幕大小下隐藏元素。例如,如果你想在小屏幕上隐藏元素,可以使用 .d-sm-none 类。

如需隐藏元素,可以在该元素上添加 .d-none 或 .d-{sm,md,lg,xl}-none 类。

<div class="d-none">This element will be hidden on all screen sizes</div>
<div class="d-sm-none">This element will be hidden on small screen sizes</div>

另外,可以使用 .d-{value}-{breakpoint}-{value} 这样的类来控制元素的可见性,其中value可以是block,inline,inline-block等,breakpoint是sm,md,lg,xl等,这样的类可以让你在不同的屏幕大小上设置元素的不同可见性。

<div class="d-block d-sm-none">This element will be block on all screen sizes except small screen</div>
  •