Question

我的可折叠导航栏有问题。当我点击按钮时，它显示可折叠按钮但不显示“li”。 Demo

这是代码

<!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>

Answer 1

你的代码很好。我在问题中使用了相同的代码并使其正常工作。唯一的变化是我指出要从云中读取的引用。所以我确定唯一的问题可能是您引用的文件包括bootstrap.min.js和jquery。检查控制台窗口，看看加载这些文件是否有任何错误。

＆＃13;

<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>

＆＃13;

Answer 2

您错过了<div class="navbar-header">加上navbar-brand通常会在切换导航之后。如果这不能帮助我知道。

＆＃13;

<!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>

＆＃13;

Answer 3

这是一个响应式Bootstrap导航栏，可以从左侧滑出并跟踪您的滚动。它可以通过媒体查询进一步定制，以在横向/最小屏幕上获得最佳效果

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

行动中：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>

可折叠引导导航栏

3 个答案: