Question

<!DOCTYPE html>
<html>

<?php
include 'includes/head.php';
?>
<body>
<?php
include 'includes/header.php';
?>

head.php： -

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>AIT Project</title>
</head>

的header.php： -

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-  target="#myNavbar">
    <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="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li> 
    <li><a href="#">Page 3</a></li> 
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Page 1-1</a></li>
      <li><a href="#">Page 1-2</a></li>
      <li><a href="#">Page 1-3</a></li> 
    </ul>
  </li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign  Up</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
   </ul>
   </div>
   </div>
   </nav>

一旦我缩小显示尺寸，引导导航栏就会进入响应模式。当我点击按钮时，整个菜单会下降，但不会重新上升。 responsive navbar 此外，在响应模式下降时，我的旋转木马被导航栏隐藏起来 the carousel

Answer 1

header.php第4行：data- target="#myNavbar"

中有拼写错误/空格

...应为data-target="#myNavbar"

修复代码工作时，请参阅 https://plnkr.co/edit/gbdhAqbgfvj57BqHzMdV?p=preview点击左边的“汉堡菜单”会展开菜单;再点击一下就崩溃了。这是你想要/期望的吗？

在响应模式下，我的下拉不会攀升

1 个答案: