Boostrap 3导航栏折叠

Boostrap 3 navbar collapse

本文关键字：折叠 导航 Boostrap      更新时间：2023-09-26

我一辈子都无法弄清楚为什么我的导航栏不会崩溃。 我带来了正常的引导js和css文件以及过渡和折叠js文件。 这是我下面的代码。 任何帮助将不胜感激。

<nav class="navbar navbar-inverse 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">LandingExample</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavBar">
    <ul class="nav navbar-nav">
        <li class="active"><a href="./index.html">Home</a></li>
        <li><a href="./fallpage.html">About Us</a></li>
        <li><a href="">Submit Form</a></li> 
        <li><a href="./fallpage.html">Contact Us</a></li> 
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="./fallpage.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="./fallpage.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        <li><img class="product-select-logo" width = "34.8" height="38.4" src="http://static.hsappstatic.net/style_guide/static-8.123/img/logos/hubspot/sprocket-64.png"></li>
    </ul>
    </div>
  </div>
</nav>

我不明白为什么有些人在不需要时在导航栏中使用列表标签。无论如何，这里有一个你可能喜欢的HTML5折叠菜单技术：

<nav style="position:absolute; left:20px; top:50px;">
<div onclick="TheBox.removeAttribute('open');">
<details id="TheBox"><summary>Choices</summary>
<a href="javascript:void(0)" target="_blank" title="">Home</a><br>
<a href="javascript:void(0)" target="_blank" title="">About</a><br>
<a href="javascript:void(0)" target="_blank" title="">Products</a><br>
<a href="javascript:void(0)" target="_blank" title="">Services</a><br>
<a href="javascript:void(0)" target="_blank" title="">Contact</a>
</details></div></nav>

请使用这个html..我认为你的问题已经解决了。

<nav class="navbar navbar-inverse">
  <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="#">LandingExample</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="./index.html">Home</a></li>
        <li><a href="./fallpage.html">About Us</a></li>
        <li><a href="">Submit Form</a></li> 
        <li><a href="./fallpage.html">Contact Us</a></li> 
    </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="./fallpage.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="./fallpage.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        <li><img class="product-select-logo" width = "34.8" height="38.4" src="http://static.hsappstatic.net/style_guide/static-8.123/img/logos/hubspot/sprocket-64.png"></li>
    </ul>
    </div>
  </div>
</nav>
相关文章：