html - 如何不使用 CSS 显示元素

Question

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

所以我为这两个不应出现在中型和大型设备上的菜单项设置了类名secondary:

<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 测试版) <强> http://getbootstrap.com/css/#responsive-utilities (对于 v3.x)

您不需要添加额外的类(class)。就用这些

可能你需要 .hidden-md-up 类