Bootstrap - 折叠菜单无法打开

时间:2015-05-26 17:52:34

标签: twitter-bootstrap

我使用了boostrap,我的折叠菜单无法打开。我没有包含jquery和bootstrap js文件。我的网站是http://joseph-anthony-king.com/。代码如下:

    <div class="navbar navbar-default">
    <div class="navbar-inner">
        <div class="container">
            <div class="navbar-header">
                <button type="button"
                        class="navbar-toggle"
                        data-toggle="collapse"
                        data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="siteTitle" class="navbar-brand" href="/">Joseph Anthony King</a>
            </div>
            <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav pull-right">
                <li class="dropdown">
                    <a href="/">Home</a>
                </li>
                <li class="dropdown">
                    <a href="/Resume">Resume</a>
                </li>
                <li class="dropdown">
                    <a href="/Downloads">Downloads</a>
                </li>
                <li class="dropdown">
                    <a href="https://joe-king-sample-app.herokuapp.com/" target="_blank">
                        Sample App
                    </a>
                </li>
            </ul>
            </div>
        </div>
    </div>
</div>

2 个答案:

答案 0 :(得分:1)

data-target中的button-tag错误它不应该是类,它应该是折叠id的{​​{1}}。所以我做的是给你的divcollapsing div以及id按钮,我写了data-target

collapsing div id

Bootply link here

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myCollapseGuy"></button> 
<!--keep in mind that the collapsing div's id="myCollapseGuy" not "#myCollapseGuy"--> 

答案 1 :(得分:0)

我找到了答案,我必须按如下方式渲染jQuery和bootstrap js库:

@Scripts.Render("~/Scripts/jquery-1.9.1.js")
@Scripts.Render("~/Scripts/bootstrap.js")