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

Question

目前我正在创建一个基于 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

应该是d-none d-md-block。您需要从 class

中删除 .

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

Answer 2

您必须使用d-breakpoint-none隐藏xs和sm断点中没有点的元素，如下所示：

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

了解更多详情 https://getbootstrap.com/docs/4.0/utilities/display/

Answer 3

您目前在 HTML 中写错了您的 class 名字。 d-none 和 d-sm-block 应该不带“.”。即

<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>

或者，您可以使用媒体查询 select 您想要显示为 none 的 class。

@media screen and (max-width: 768px ) {
.classname {
display: none
}
}

这将隐藏 xs 和 sm 的 class。

Answer 4

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

这应该适合你

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

Bootstrap 4.x 显示作弊 sheet

| 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?

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

How to hide element for mobile device with bootstrap4?

html

css

responsive-design

bootstrap-4