个人中心
gpt4 book ai didi

css - 显示:无；不工作但 visibility :隐藏；做

转载 作者：行者123 更新时间：2023-12-05 08:52:05 26 4
gpt4 key购买 nike

<分区>

我试图在屏幕达到一定宽度时隐藏我的菜单，但由于某些原因 display:none 不起作用，但 visibility:hidden 起作用。
我使用的是教程中那个人的确切代码(取自他上传的 css 文件)，它适用于他但不适用于我？
我理解两者之间的区别，但是我不明白为什么一个人隐藏了元素而另一个人出于某种原因却没有。
这是 css 代码:

  .site-header__menu-trigger {
    color: #FFF;
    cursor: pointer;
    font-size: 1.2rem;
    position: absolute;
    z-index: 10;
    top: 7px;
    right: 46px;
  }

  @media (min-width: 530px) {

    .site-header__menu-trigger {
      top: 5px;
      font-size: 1.4rem;
    }
  }

  @media (min-width: 960px) {

    .site-header__menu-trigger {
      display: none;
    }
  }

更新:抱歉，这是我的 HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body>
<header class="site-header">
    <div class="container">
      <h1 class="school-logo-text float-left"><a href="<?php echo site_url() ?>"><strong>Fictional</strong> University</a></h1>
      <span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
      <i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i> 
      <div class="site-header__menu group">
        <nav class="main-navigation">
          <ul>
            <li><a href="<?php echo site_url('/about-us') ?>">About Us</a></li>
            <li><a href="<?php echo site_url('/programs') ?>">Programs</a></li>
            <li><a href="<?php echo site_url('/events') ?>">Events</a></li>
            <li><a href="<?php echo site_url('/campuses') ?>">Campuses</a></li>
            <li><a href="<?php echo site_url('/blog') ?>">Blog</a></li>
          </ul>
        </nav>
        <div class="site-header__util">
          <a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
          <a href="#" class="btn btn--small  btn--dark-orange float-left">Sign Up</a>
          <span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
        </div>
      </div>
    </div>
  </header>
</body>
</html>

更新 2:更改我的 wp_enqueue_style() 函数的顺序解决了这个问题，我必须先加载 Bootstrap css，然后再加载我自己的 css 文件，如下所示:

wp_enqueue_style('fontAwesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('university_main_styles', get_stylesheet_uri(), NULL, microtime());

现在它甚至可以在没有 !important 显示的情况下工作。

26 4 0
文章推荐： angular - 如何使用Angular的safety-worker.js卸载Service Worker？
文章推荐： ruby-on-rails - rails 凭据不获取
文章推荐： angular - 在 ngIf 中使用异步管道的 ngFor Observable 不显示任何结果
文章推荐： vue.js - Vue中如何加载外部CSS
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com