Question

我想创建一个响应式网站，基本上我不想在大中型设备上显示该文档的某些元素。但是当谈到小型设备时，它们应该出现..

所以我为这两个不应出现在中型和大型设备上的菜单项设置了次要的班级名称：

<li class="BKoodakBold rightlinks secondary"><a href="#">Link</a></li>
<li class="BKoodakBold rightlinks secondary"><a href="#">Link</a></li>`

我认为这背后的主要想法很好，但问题是它甚至不起作用！我的意思是这两个链接仍然出现在中等屏幕上!!

那么我该如何解决这个问题呢？

@media screen and (min-width: 768px) {
  .secondary {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .secondary {
    display: inline;
  }
}

<nav id="nav_wrapper" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    					<span class="sr-only">Toggle navigation</span>
    					<span class="icon-bar"></span>
    					<span class="icon-bar"></span>
    					<span class="icon-bar"></span>
    				</button>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="BKoodakBold leftlinks"><a href="#"><span class="glyphicon glyphicon-user ico"></span></a></li>
        <li class="BKoodakBold leftlinks"><a href="#" onclick="toggleNavPanel('sections_panel')"><span class="glyphicon glyphicon-search ico"></span></a></li>
        <div id="sections_panel">
          <div>
            <form class="navbar-form navbar-left" role="search">
              <input type="submit" class="search BKoodakBold" value="جستجو"></input>
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
            </form>
          </div>
        </div>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="BKoodakBold rightlinks secondary"><a href="#">ورود/ثبت نام</a></li>
        <li class="BKoodakBold rightlinks secondary"><a href="#">جستجو در گویانت</a></li>
        <li class="BKoodakBold rightlinks"><a href="#">درباره ما &nbsp; <span class="glyphicon glyphicon-info-sign ico"></span></a></li>
        <li class="BKoodakBold rightlinks"><a href="#">ارشیو ویدیوها &nbsp; <span class="glyphicon glyphicon-gift ico"></span></a></li>
        <li class="BKoodakBold rightlinks"><a href="#">صفحه اصلی &nbsp; <span class="glyphicon glyphicon-globe ico"></span></a></li>
      </ul>
      <ul class="nav navbar-nav navbar-center">
        <a class="navbar-brand" href="#"><img src="assets/img/logo.png" width="50"></a>
      </ul>
    </div>
  </div>
</nav>

Answer 1

看起来像你使用bootstrap。所以看看这个链接。

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/ （适用于V4 Alpha） http://getbootstrap.com/css/#responsive-utilities （适用于v3.x）

你不需要添加额外的课程。只需使用这些

可能需要.hidden-md-up课程

Answer 2

检查html

中添加的以下代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />

Answer 3

尝试并更改您的@media屏幕代码。

@media screen and ( max-width: 550px){
.secondary{
display:none;
}
}

这一个意味着如果您的显示器小于550px，它将无法显示。

Answer 4

你没有提供一个中间宽度＆＃34;没有任何。

如果您需要选择＆＃34;中＆＃34; width，然后将这两者合并为一个并使用它来隐藏所需的元素。

@media screen and (min-width: 500px) and (max-width: 850px){
  .object {
    display:none;
  }
}

如果您的媒体设备被定义为该范围，这将使具有.object类的元素在中间范围内不可见。

Answer 5

在具有响应性实用程序类Please refer the link

的bootstrap 4中

如果您正在使用Bootstrap 3这样的实用程序类please refer the link

如何不用CSS显示元素

5 个答案: