Collapsible bootstrap navbar

问题

I have problem with my collapsible navbar. It shows collapsible button but not "li" when i click on button. Demo

Here is code

<!DOCTYPE html>
<html>
<head>
	<title>Navbar Collapse</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" href="jquery/jquery-1.12.2.min.js"></script>
	<script type="text/javascript" href="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="navbar navbar-inverse">
		<div class="container">
				<a href="#" class="navbar-brand">MyWebsite</a>
				<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>
			<div class="collapse navbar-collapse" id="mynavbar">
				<ul class="nav navbar-nav navbar-left" >
					<li><a href="">Home</a></li>
					<li><a href="">about</a></li>
					<li><a href="">contact</a></li>
					<li><a href="">search</a></li>
				</ul>
			</div>
		</div>	
	</div>
</body>
</html>

回答1:

You code is all fine. I took the same code in the question and got it working. The only change is I pointed the references to be read from cloud. So I am sure The only problem might be the files you are referencing for including bootstrap.min.js and your jquery. Check your console window to see if there was any error loading these files.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="navbar navbar-inverse">
  <div class="container">
    <a href="#" class="navbar-brand">MyWebsite</a>
    <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>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="">Home</a>
        </li>
        <li><a href="">about</a>
        </li>
        <li><a href="">contact</a>
        </li>
        <li><a href="">search</a>
        </li>
      </ul>
    </div>
  </div>
</div>

回答2:

You missed out <div class="navbar-header"> plus navbar-brand usually goes after toggle navigation. If that doesn't help I have know idea.

<!DOCTYPE html>
<html>
<head>
	<title>Navbar Collapse</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" href="jquery/jquery-1.12.2.min.js"></script>
	<script type="text/javascript" href="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="navbar navbar-inverse">
		<div class="container">
            <div class="navbar-header">
				<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 href="#" class="navbar-brand">MyWebsite</a>
            </div>
			<div class="collapse navbar-collapse" id="mynavbar">
				<ul class="nav navbar-nav navbar-left" >
					<li><a href="">Home</a></li>
					<li><a href="">about</a></li>
					<li><a href="">contact</a></li>
					<li><a href="">search</a></li>
				</ul>
			</div>
		</div>	
	</div>
</body>
</html>

回答3:

Here's a responsive Bootstrap navbar that toggle-slides out from the left and tracks your scroll. It can be further customized with media queries for best results on landscape/smallest screens

http://codepen.io/TheNickelDime/pen/NppZdQ

in action: http://cathairapocalypse.com

<!-- NAVBAR -->

<div id="ca_sidenav" class="container-fluid clearfix scrollspy">

    <ul id="ca_nav" class="nav" data-spy="affix">

       <li><a id="ca_nav0" class="CA_navButton active" href="#ca_section0" onclick="navButtonClick(0);"><div class="CA_navHighlight"></div><span><B2>Section0</B2></span></a></li>
       <li><a id="ca_nav1" class="CA_navButton" href="#ca_section1" onclick="navButtonClick(1);"><div class="CA_navHighlight"></div><span><B2>Section1</B2></span></a></li>
       <li><a id="ca_nav2" class="CA_navButton" href="#ca_section2" onclick="navButtonClick(2);"><div class="CA_navHighlight"></div><span><B2>Section2</B2></span></a></li>
       <li><a id="ca_nav3" class="CA_navButton" href="#ca_section3" onclick="navButtonClick(3);"><div class="CA_navHighlight"></div><span><B2>Section3</B2></span></a></li>
       <li><a id="ca_nav4" class="CA_navButton" href="#ca_section4" onclick="navButtonClick(4);"><div class="CA_navHighlight"></div><span><B2>Section4</B2></span></a></li>
       <li><a id="ca_nav5" class="CA_navButton" href="#ca_section5" onclick="navButtonClick(5);"><div class="CA_navHighlight"></div><span><B2>Section5</B2></span></a></li>

    </ul>

</div>

来源：https://stackoverflow.com/questions/36819511/collapsible-bootstrap-navbar

标签

twitter-bootstrap

navbar