如何使用 Bootstrap 5 隐藏 xs 屏幕的 HTML 元素？

Question

 <ul class="container">
   <li class="row">
     <div class="col">
       <img width="390" src="#">
       <div>29&nbsp;€</div>
     </div>
     <div class="col d-none d-sm-block">
       <h3>Description</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
          incididunt ut labore et dolore magna aliqua.</p>
     </div>
     <div class="col">
       <h3>Jamie</h3>
       <button><span>View Item</span></button>
     </div>
   </li>
 </ul>

在上面的代码中，使用 Bootstrap 5，我需要使用 .d-none .d-sm-block 类隐藏 xs 屏幕的元素。它只能使用 .d-none .d-lg-block 来隐藏 md、sm 和 xs。

如何只为 xs 屏幕隐藏元素。

谢谢。

Answer 1

在特定的媒体查询中尝试visibility:hidden;

Answer 2

根据这个 documentation 以下类应该可以解决问题：

.d-none .d-sm-block

.d-none 隐藏所有屏幕上的元素 .d-sm-block 使元素从 sm 向上可见

如何使用 Bootstrap 5 隐藏 xs 屏幕的 HTML 元素？

How can I hide an HTML element for xs screen with Bootstrap 5?

html

css

bootstrap-5