时间戳

首页 > 解决方案 > 调整屏幕大小时隐藏元素

html - 调整屏幕大小时隐藏元素

问题描述

我有 3 个相同<div>的 s：

<div class="box">Hello World!</div>    
<div class="box">Hello World!</div>    
<div class="box">Hello World!</div>

我希望所有这些都显示在桌面屏幕大小上，如果平板电脑只显示两个，移动设备只显示一个。如何仅使用引导程序和 CSS 来做到这一点？（请注意我无法更改 html 部分）

标签： htmlcssbootstrap-4

解决方案

  1. 在CSS中，我们可以使用媒体查询。

    @media (max-width: 768px) {
 .box:first-of-type,
 .box:last-of-type {
  display: none;
 }
}

@media (max-width: 992px) {
  .box:first-of-type {
   display: none;
  }
}

  2. Bootstrap 带有实用程序类。我们直接在 HTML 中使用它们。为了使用实用程序类实现相同的结果，我们可以这样做。

    <div class="box d-none d-md-block">Hello World!</div>
<div class="box d-none d-lg-block">Hello World!</div>
<div class="box">Hello World!</div>

推荐阅读