bootstrap 3中的折叠导航栏问题答案

【问题标题】：Collapse navigation bar issue in bootstrap 3bootstrap 3中的折叠导航栏问题
【发布时间】：2014-05-28 15:46:11
【问题描述】：

通过了一些建议，例如添加 navbar-right，但仍然得到它。

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Practice</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="navbar navbar-inverse navbar-static-top">



  <div class="container">

   <a href="#" class="navbar-brand">Tech Site</a>

  <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarHeaderCollapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>

   <div class="collapse navbar-collapse navbarHeaderCollapse">

        <ul class="nav navbar-nav navbar-right">

          <li><a href="#">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Career</a></li>
          <li><a href="#">Social Media</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

   </div>
  </div>

  </div>


    <script src="jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

【问题讨论】：

你可以在图片@goutham 中看到它。当它是小屏幕时，导航菜单出现在品牌名称旁边但不在品牌名称下方

标签： twitter-bootstrap-3 navbar collapse

【解决方案1】：

我认为您使用的是旧的 bootstrap/Jquery 版本。检查这个plunk。

好的，我能够在 Firefox 中重现该错误。

您缺少 'navbar-header' div。那应该可以解决它。

    <div class="navbar-header">
    <a href="#" class="navbar-brand">Tech Site</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

【讨论】：

@saikiran 可能是 IE 的问题，我使用的是 Chrome
@goutam 是的，我在 Firefox 28 中也遇到了错误。但在 chrome 中变得很好。没想到引导程序也存在浏览器兼容性问题
请在 Firefox 中测试它。我没有得到它@goutam