【问题标题】:Hide html element when specific resolution特定分辨率时隐藏html元素
【发布时间】:2014-01-11 04:27:28
【问题描述】:

我正在使用twitter bootstrap 3.0。当屏幕分辨率更改为更小时,菜单更改为移动视图。我有一个包含图像的div 滑块,所以当我的菜单更改为移动视图时(当屏幕分辨率较小时),我想隐藏那个div

我尝试在我的 div visible-desktop visible-tablet 上应用 css 类,但它不起作用。

我还有其他办法吗?

【问题讨论】:

    标签: javascript html css twitter-bootstrap-3


    【解决方案1】:

    2021 年更新 / 引导 5.1

    Display property - Hiding elements

    要在超小(纵向移动)屏幕宽度上隐藏元素,请使用

    <div class="d-none d-sm-block">
    

    默认情况下隐藏 (.d-none),但在小型或大型设备上可见。


    2013 年原始答案

    如果您使用的是 Bootstrap v3,他们更改了响应式实用程序类名称。见http://getbootstrap.com/css/#responsive-utilities

    你可能想要.hidden-xs

    这也记录在Migrating from 2.x to 3.0

    【讨论】:

      【解决方案2】:

      考虑使用媒体查询。类似的东西

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

      【讨论】:

      【解决方案3】:

      您只需应用 Bootstrap 类,如 here 所示。您也可以在那里测试它们,如果您调整浏览器屏幕的大小,您可以检查哪些是活动的。

      <div class="hidden-xs">This is the div that will hide on mobile</div>
      

      只能在低于 768 像素(手机)的任何屏幕中看到

      【讨论】:

        【解决方案4】:

        你可以把那个 div .hidden-xs.. 的类放进去。这样更简单。您只是说这个 div 在台式机和平板电脑上可见,而不是告诉它在小型设备中不可见。

        【讨论】:

          猜你喜欢
          • 2016-06-26
          • 2016-04-05
          • 2016-01-06
          • 2011-12-04
          • 2011-12-28
          • 1970-01-01
          • 2015-12-03
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多