Question

我正在尝试使用bootstrap构建我的导航栏，但我遇到的问题是，当我有一个小屏幕或窗口时，移动菜单按钮不会出现在右上角。我做错了什么？

<nav class="navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
            </button>

        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#home">Home</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        </div>
    </div>
</nav>

和我的css：

.navbar{
    background-color:#fff;
    border-bottom:1px solid black;
}


.navbar-nav > li > a{
    color:#1E88E5 !important;
    font-size:16px !important;
    font-weight:bold !important;
    display: block !important;
    background-color:#fff !important;
}

.navbar-nav > li > a:hover{
    color:#673ab7 !important;
    background-color:#f0f5f5 !important;
}

Answer 1

您忘记了nav元素（navbar-default或navbar-inverse）中的导航栏样式类。样式切换按钮取决于此类。

<nav class="navbar navbar-default navbar-fixed-top">

Answer 2

包括bootstrap.min.css＆amp;链接中的bootstrap.css就可以了。

较小屏幕上的Bootstrap菜单按钮

2 个答案: