如何使用 bootstrap4 隐藏移动设备的元素？ [复制]

Posted 2023-03-05

【中文标题】如何使用 bootstrap4 隐藏移动设备的元素？ [复制]

【英文标题】：How to hide element for mobile device with bootstrap4? [duplicate]

【发布时间】：2019-11-24 02:58:22

【问题描述】：

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

通常我使用此处记录的“.hidden-sm-down”：https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

我还尝试了以下替代方法：.d-none .d-md-block .d-xl-none 或隐藏。

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

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

【参考方案1】：

目前可以使用 .d-none 隐藏元素 设备，但我只想为 xs 和 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?

【参考方案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"  class="rounded-circle"> 
      </a> 
   </div> 
</div>

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

【讨论】：

Khaled，在 bootstrap 4 中没有 xs，如果你想处理额外的小视口，它只有 d-none。

【参考方案3】：

应该是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"  class="rounded-circle">
      </a>
   </div>
</div>

【讨论】：

感谢您的回答。创建问题时有点粗心的错误。即使没有点，它也不起作用。

【参考方案4】：

您当前在 html 中错误地编写了您的班级名称。 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"  class="rounded-circle">
      </a>
   </div>
</div>

或者，您可以使用媒体查询来选择要显示为无的类。

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

这将隐藏 xs 和 sm 的类。

【讨论】：

谢谢。其他问题的绝佳替代解决方案。