当前位置: 首页 > 知识库问答 >
问题:

如何使用bootstrap4隐藏移动设备的元素?[副本]

东门玺
2023-03-14

目前,我正在创建一个基于bootstrap4的站点,并希望为移动设备对此进行优化。对于某些屏幕尺寸,如何不显示元素?

通常情况下,我使用"。隐藏-sm-down",如下所示:https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

我还尝试了其他方法,如:。没有。d-md-block。d-xl-无或隐藏。

<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隐藏它。

共有3个答案

司空玮
2023-03-14

它应该是d-none d-md-block。您需要删除 来自您的课程

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

曾永新
2023-03-14

您当前正在用超文本标记语言错误地编写您的类名。应该在没有“。”即

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

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

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

这将隐藏xs和sm的类。

蒲寂离
2023-03-14

当前,可以使用隐藏元素。d-none适用于所有设备,但我只想为xs和sm隐藏它。

这应该对你有用

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

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

还要检查我对一个相关问题的回答-在响应性布局中隐藏元素?

 类似资料:
  • 问题内容: 好吧,我有些困惑。 我试图考虑来自jQuery背景的角度方式。 问题:如果窗口不滚动,我只想隐藏一个固定的元素。如果有人向下滚动页面,我想隐藏该元素。 我尝试创建一个自定义指令,但由于滚动事件未触发,因此无法使其正常工作。我在想一个像下面这样的简单控制器,但是它甚至没有运行。 控制器: 视图 实时预览 http://www.thewinetradition.com.au/new/#/p

  • 本文向大家介绍如何使用animate(),隐藏和显示元素?,包括了如何使用animate(),隐藏和显示元素?的使用技巧和注意事项,需要的朋友参考一下 使用和方法来隐藏和显示元素。 示例 您可以尝试运行以下代码,以了解如何使用方法来隐藏和显示元素:

  • 问题内容: 谁能帮我这个。 我想检测Iphone,BB,andriod等设备以及浏览器,以应用其特定的CSS使其液化或调整其分辨率。 在移动浏览器上,andriod和Iphone是否存在分辨率差异问题或CSS问题,因为我计划为这2个用户使用相同的CSS,因为我知道它们默认使用相同的浏览器浏览器。 问题答案: 尝试使用并检查字段。当然,只有在php.ini中设置了路径时,它才可能有所帮助。如果没有,

  • 我试图从一个网站上为我的项目收集数据。但是问题是我没有在我的输出中得到我在我的开发者工具栏屏幕中看到的标签。以下是我想从其中抓取数据的DOM的快照: 我能够获得类为“bigContainer”的div标记,但是我不能在这个标记中刮取标记。例如,如果我想得到网格项标记,我得到了一个空列表,这意味着它表明没有这样的标记。为什么会这样?请帮忙!!

  • 问题内容: 我正在尝试从隐藏的示例中读取示例字符串: 我知道这不适用于Selenium2(WebDriver)中的隐藏元素,因此我搜索了解决方案(像这样),显然以下代码应该可以工作: 但这对我不起作用,变量始终以结尾。我究竟做错了什么? 问题答案: 编辑:哦,这可行。 在Firefox中。 这也是。 我也尝试过,但是它似乎不能用于纯Javascript。如此处所述,使用Jquery启动浏览器。如何

  • 以下是我的html代码: