Question

我不能为我的生活弄清楚为什么我的导航栏不会崩溃。我引入了正常的bootstram 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>

Answer 1

我不明白为什么有些人在你不需要时会在导航栏中使用List标签。无论如何，这里是您可能喜欢的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>

Answer 2

请使用这个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>

Boostrap 3导航栏崩溃

2 个答案: