jquery - 试图让我的导航栏在移动设备上下拉

Question

所以基本上，我使用数据切换和数据目标来确保当我的网站移动时它会有一个下拉菜单。但是它似乎没有用。这是我的一些代码

<div class="container">

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

  <button class = "navbar-toggle"data-toggle = "collapse" data-target =  ".navHeaderCollapse">
    F
  </button>

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

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

    <li><a href = "#">Home</a></li>
    <li><a href = "#">About</a></li>
    <li><a href = "#">Contact</a></li>

  </ul>


  </div>

Answer 1

使用 bootstrap 时，您需要使用其完整的导航栏标记来获得所需的效果。您可以在此处找到文档 Bootstrap Navbars .通读本文档以更好地理解 Bootstrap 导航栏。因此，您的标记应如下所示。

<nav class="navbar navbar-default">
    <div class="container">  
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Bootstrap Navbar</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

这是一个 fiddle ，向您展示这是如何工作的 Bootstrap Navbar Fiddle Demo

如果你想让你的导航栏有一个深色，你可以使用 navbar-inverse 而不是 navbar-default，如果你想要一个固定在顶部的导航栏，你可以像我一样添加 navbar-fixed-top 类做了 fiddle 。

这是 Bootstrap 导航栏的正确标记。 Steff Yang 在这里给出了另一个答案。在这个答案中，他有 2 个 navbar-header div 左右浮动。这种做法有几个问题。主要是，如果您的宽度小于 767px 并单击菜单切换按钮，然后在菜单仍然折叠时将窗口调整为更大的宽度，您将遇到导航栏问题。这对于横向分辨率大于 767 像素和纵向分辨率小于 767 像素的设备来说是有问题的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
    <div class="container">  
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Bootstrap Navbar</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>