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。阅读本文档以更好地了解引导程序导航栏。所以你的标记应该如下所示。

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

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

如果您希望导航栏颜色为深色，可以使用navbar-inverse而不是navbar-default，如果您想要一个精确到顶部的导航栏，您可以像我一样添加navbar-fixed-top类在小提琴中做了。

这是引导导航栏的正确标记。 Steff Yang还有另一个答案。在这个答案中，他有2个navbar-header div左右浮动。这种做法存在一些问题。主要是如果您的宽度小于767px并单击菜单切换按钮，然后在菜单仍然折叠时将窗口调整为更大的宽度，则导航栏会出现问题。对于横向分辨率大于767px且肖像小于767px的设备而言，这是有问题的。

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

Answer 2

这是一个基于您的HTML代码的JSFiddle，可以帮助您：https://jsfiddle.net/RxguB/341/

我假设您的nabber基于Bootstrap且没有任何其他自定义CSS，因此我只需添加几行代码即可使您的导航栏符合Bootstrap格式。

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container"> 
        <div class="navbar-header pull-left">     
            <a class="navbar-brand" href="#">Chey</a>
        </div>
        <div class="navbar-header pull-right">
            <button type="button" class="navbar-toggle" 
              data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button> 
        </div>  
        <div class="navbar-collapse collapse navHeaderCollapse">
            <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>
</div>

Answer 3

你是否包含了javascript文件？

bootstrap.js 或 bootstrap.min.js

该文件包含所有插件。

script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')

试图在移动设备上拖动导航栏

3 个答案: