可折叠 bootstrap 导航栏

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

您错过了 <div class="navbar-header"> 加上 navbar-brand 通常在切换导航之后。如果那没有帮助，我已经知道了。

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

Answer 2

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

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

Answer 3

这是一个响应式 Bootstrap 导航栏，它从左侧切换滑出并跟踪您的滚动。可以使用媒体查询进一步自定义它以获得在 landscape/smallest 屏幕

上的最佳结果

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>

可折叠 bootstrap 导航栏

Collapsible bootstrap navbar

navbar

twitter-bootstrap