Bootstrap Navbar-collaps在点击时无法打开

时间:2016-02-18 11:36:03

标签: html twitter-bootstrap navigation

我正在尝试为我的Mobile.site.master页面使用bootstrap Navbar-collaps菜单,但它似乎有问题,按钮是我想要的地方它只是点击菜单实际上没有打开我不喜欢不知道为什么任何帮助会很棒。如果您需要其他任何信息,请在下面发布,请告知我们。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <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="#">BRAND</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                      <li>
                        <a href="#">Fixed Link</a>
                      </li>
            </ul>
            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav">
                     <li><a href="#">L1</a></li>
                    <li><a href=#">L2</a></li>
                </ul>

            </div>

        </div>

3 个答案:

答案 0 :(得分:1)

您应该在菜单div <div class="collapse navbar-collapse" id="MenuID">中使用ID并在按钮data-target="#MenuID"

中调用它
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#MenuID" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>


    <div class="collapse navbar-collapse" id="MenuID">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">L1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">L2</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Fixed Link</a></li>

      </ul>
    </div>
  </div>
</nav>

您可以在此处查看结果bootply

答案 1 :(得分:0)

您的代码中的一处更改您忘记了href "第二个链接

<ul class="nav navbar-nav">
                     <li><a href="#">L1</a></li>
                    <li><a href="#">L2</a></li>
                </ul>

您的代码现在正在使用

你可能包含这个文件吗?

bootstrap.css
jquery library
bootstrap.js

https://jsfiddle.net/k60f4x3c/

答案 2 :(得分:0)

我不得不恢复我的项目的备份,并且在使用Github时删除了下拉工作所需的一个JS文件,我的代码实际上没有错误,只是其中一些错过了。