Question

我的bootstrap网站li标签将在移动版本上浓缩。但是当我点击切换按钮时，导航栏将无法加载移动版本。

这是带有javascript引用的html / css代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Welcome to our website</title>
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/respond.min.js"></script>

	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">

<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
	
</head>
	
<body>

 
<div class="navbar navbar-inverse navbar-fixed-top" id="main-navbar">
		<div class="container">
			<div class="navbar-header">
			<a href="" class="navbar-brand">FaceTheMusic</a>
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-
			target=".navHeaderCollapse">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			</button>
			</div>
		
			<div class="collapse navbar-collapse navHeaderCollapse">
			<ul class="nav navbar-nav">
			<li><a href="">Home</a></li>
			<li><a href="">Login</a></li>
			<li><a href="">Search</a></li>
			<li><a href="">Upload</a></li>
			</ul>
			</div>
	</div>
</div>


<div id="navPlayer" class="navbar navbar-inverse navbar-fixed-bottom">
	<ul>
		<li>Home</li>
	</ul>
</div>
<br /> <br/> <br />
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> 
This is a test <br />
This is a test <br /> This is a test <br />This is a test <br />This is a test <br />This is a test <br />
This is a test <br />This is a test <br />This is a test <br />This is a test <br />This is a test <br />
This is a test <br />This is a test <br />This is a test <br />This is a test <br />This is a test <br /> 
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />
This is a test <br />This is a test <br />This is a test <br />This is a test <br />This is a test <br />
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> 
This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br /> This is a test <br />
		
	</body>
</html>

Answer 1

数据目标

之间有一个额外的空间

 <button type="button" class="navbar-toggle" data-toggle="collapse" data-
        target=".navHeaderCollapse">

应该是

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">

如果你解决了这个问题，它应该可行。 https://jsfiddle.net/5fx9qwuy/1/

Answer 2

Abdullah Haider 你好有几个问题，为什么这对你不起作用。
在主导航代码块中，您遗漏了一些classes和id。
<ul>上方的div应该包含此ID ... id="navbar"。

另外，您在页面顶部有 JS 所有内容，请尝试始终将JS链接放在页面的最底部。

以下是您的代码 Fiddle 。

尝试将此作为导航栏的起点。

<nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="">Home</a></li>
            <li><a href="#">Login</a></li>
            <li><a href="#">Search</a></li>
            <li><a href="#">Upload</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

查看此代码和导航栏代码以查看更改。

希望这有助于您入门。

Bootstrap 3 Navbar不会切换（已检查现有解决方案，单击时仍不会切换折叠）

2 个答案: