【问题标题】:Navbar not showing and working on mobile导航栏未显示并在移动设备上工作
【发布时间】:2017-05-23 07:45:44
【问题描述】:

我有一个带有导航栏按钮和下拉菜单的网站,但是当我在移动设备或更小的设备上对其进行测试时,我看不到导航栏,无法按下任何按钮,也根本没有关于导航栏的详细信息。如果我缺少标签,我检查了多次,但看不到任何缺失。

我的导航栏脚本:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sample</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
  </head>

  <body background="images/bg.jpg">
    <nav class="navbar navbar-light" style="background:whitesmoke" role="navigation">
      <div class="navbar-header">
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">About Us</a></li>
          <li class="active"><a href="#">Issuances</a></li>
          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Masterlist of School <strong class="caret"></strong></a>
            <ul class="dropdown-menu multi-level">
              <li class="dropdown-submenu">
                <a href="#">Masterlist<br> S.Y. 2016-2017</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Public School</a></li>
                  <li><a href="#">Public 2 School</a></li>
                </ul>
            </ul>
            </li>
            <li>
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Others <strong class="caret"></strong></a>
            </li>
            <li class="active"> <a href="#" data-toggle="modal" data-target="#login-modal">Login</a></li>
            <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
              <div class="modal-dialog">
                <div class="loginmodal-container">
                  <h1>Login</h1>
                  <br>
                  <?php if(isset($error_msg)){ echo $error_msg; } ?>
                    <form action="" method="post" name="login">
                      <input type="text" name="username" placeholder="Username" required>
                      <input type="password" name="password" placeholder="Password" required>
                      <input type="submit" name="submit" class="login loginmodal-submit" value="Login">
                    </form>
                </div>
              </div>
            </div>
        </ul>
      </div>
  </body>
</html>

【问题讨论】:

标签: jquery html css responsive-design navbar


【解决方案1】:

我发现您的 HTML 不正确。对于移动视图,使用带有navbar-toggle 类的按钮,它应该有一个data-toggle 属性和一个指定导航栏链接容器的ID 的数据目标属性。

在你的例子中,你应该使用这样的东西。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
</button>

我对您的代码进行了一些更改以使其正常工作。检查附加在这里的sn-p am。

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sample</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style>
    .thumbnail {
      background: whitesmoke;
    }
    
    a:hover {
      color: black;
    }
    
    .navbar-nav>li>.dropdown-menu {
      background-color: whitesmoke;
    }
    
    .navbar-nav>li>.dropdown-menu a {
      color: black;
    }
    
    .dropdown-submenu {
      position: relative;
    }
    
    .dropdown-submenu>.dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -6px;
      margin-left: -1px;
      background-color: whitesmoke;
      -webkit-border-radius: 0 6px 6px 6px;
      -moz-border-radius: 0 6px 6px;
      border-radius: 0 6px 6px 6px;
    }
    
    .dropdown-submenu:hover>.dropdown-menu {
      display: block;
    }
    
    .dropdown-submenu>a:after {
      display: block;
      content: " ";
      float: right;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 5px 0 5px 5px;
      border-left-color: black;
      margin-top: 5px;
      margin-right: -10px;
    }
    
    .dropdown-submenu:hover>a:after {
      border-left-color: #fff;
    }
    
    .dropdown-submenu.pull-left {
      float: none;
    }
    
    .dropdown-submenu.pull-left>.dropdown-menu {
      left: -100%;
      margin-left: 10px;
      -webkit-border-radius: 6px 0 6px 6px;
      -moz-border-radius: 6px 0 6px 6px;
      border-radius: 6px 0 6px 6px;
    }
    
    button.navbar-toggle {
      border: 2px solid #ddd;
    }
    
    .navbar-toggle .icon-bar {
      background-color: #333;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body background="images/bg.jpg">
  <nav class="navbar navbar-light" style="background:whitesmoke" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" ">
				<span class="icon-bar "></span>
				<span class="icon-bar "></span>
				<span class="icon-bar "></span>                        
		    </button>
      <a class="navbar-brand " href="# ">WebSiteName</a>
      </div>
      <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1 ">
        <ul class="nav navbar-nav ">
          <li class="active "><a href="# ">About Us</a></li>
          <li class="active "><a href="# ">Issuances</a></li>
          <li>
            <a href="# " class="dropdown-toggle " data-toggle="dropdown ">Masterlist of School <strong class="caret "></strong></a>
            <ul class="dropdown-menu multi-level ">
              <li class="dropdown-submenu ">
                <a href="# ">Masterlist<br> S.Y. 2016-2017</a>
                <ul class="dropdown-menu ">
                  <li><a href="# ">Public School</a></li>
                  <li><a href="# ">Public 2 School</a></li>
                </ul>
            </ul>
            </li>
            <li>
              <a href="# " class="dropdown-toggle " data-toggle="dropdown ">Others <strong class="caret "></strong></a>
            </li>
            <li class="active "> <a href="# " data-toggle="modal " data-target="#login-modal ">Login</a></li>
            <div class="modal fade " id="login-modal " tabindex="-1 " role="dialog " aria-labelledby="myModalLabel " aria-hidden="true " style="display: none; ">
              <div class="modal-dialog ">
                <div class="loginmodal-container ">
                  <h1>Login</h1>
                  <br>
                  <?php if(isset($error_msg)){ echo $error_msg; } ?>
                    <form action=" " method="post " name="login ">
                      <input type="text " name="username " placeholder="Username " required>
                      <input type="password " name="password " placeholder="Password " required>
                      <input type="submit " name="submit " class="login loginmodal-submit " value="Login ">
                    </form>
                </div>
              </div>
            </div>
        </ul>
      </div>
	</div>
	</nav>
      
  </body>

我为导航栏切换按钮添加了边框样式,以使其出现在屏幕上。

由于某种未知原因,这里无法正常工作,只需尝试粘贴代码并在浏览器中运行即可。它应该按预期工作。

【讨论】:

    猜你喜欢
    • 2021-04-11
    • 1970-01-01
    • 2018-09-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-07-10
    • 2014-09-04
    • 2017-09-21
    相关资源
    最近更新 更多