html - 如何使用bootstrap4隐藏移动设备的元素？

Question

这个问题在这里已经有了答案:





Missing visible-** and hidden-** in Bootstrap v4

(11 个回答)


2年前关闭。




目前我正在创建一个基于 bootstrap 4 的站点，并希望针对移动设备对其进行优化。如何不显示某些屏幕尺寸的元素？

通常我使用“.hidden-sm-down”，如此处所述:https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

我还尝试了以下替代方案:.d-none .d-md-block .d-xl-none 或 hidden。

<div class="col-lg-4 order-lg-1 .d-none .d-sm-block">
   <div class="card-profile-image">
      <a href="#">
        <img src="myimage.ong" alt="" class="rounded-circle">
      </a>
   </div>
</div>

目前可以为所有设备隐藏带有 .d-none 的元素，但我只想为 xs 和 sm 隐藏它。

Answer 1

Currently it is possible to hide the element with .d-none for alldevices but I only want to hide it for xs and sm.

这应该适合你

<div class="d-none d-md-block">
...
</div>

Bootstrap 4.x 显示备忘单

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

另请检查我对相关问题的回答 - Hiding elements in responsive layout?