Question

当浏览器窗口处于手机大小时，我需要显示navbar-toggle，当用户点击它时，我想显示一个列表（类似于此http://getbootstrap.com/examples/navbar-static-top/）。

知道如何修复我的代码吗？

<div class="container">
    <!-- navbar -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">KanbanBoard</a>

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <button type="button" class="btn btn-default navbar-btn">Boards</button>
                <button type="button" class="btn btn-default navbar-btn navbar-right"><span class="glyphicon glyphicon-cog"></span>&nbsp;MY NAME</button>
            </div>
        </div>
    </nav>

    <!-- boards -->
    <div ng-view></div>
</div>

Answer 1

将您的项目保留在导航栏中，将其作为无序列表，并使用“nav”“navbar-nav”类来解决问题。

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><button type="button" class="btn btn-default navbar-btn">Boards</button></li>
        <li><button type="button" class="btn btn-default navbar-btn navbar-right"><span class="glyphicon glyphicon-cog"></span>&nbsp;MY NAME</button></li>
    </ul>                
</div>

http://jsfiddle.net/D2RLR/7500/

Answer 2

确定你已经添加了JQuery，有时你应该在页面顶部添加它

如果你想使用cdn

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Answer 3

您忘了添加bootstrap JavaScript文件。

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

如何在引导程序中启用切换按钮导航栏切换

3 个答案: