当导航栏位置为绝对时，引导导航栏折叠不起作用

Question

使用position: absolute; 时，导航栏折叠无法正常工作。展开菜单时，其他内容不再向下移动。此外，展开和折叠按钮不可见（这就是我将其设为灰色的原因）并且没有出现在正确的位置。

导航栏的 HTML 代码：

<nav class="bootstrap-iso navbar navbar-default navbar-absolute">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="bootstrap-iso navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#">DEMO</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right" id="navbar-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Bruid</a></li>
                    <li><a href="#">Bruidegom</a></li>
                    <li><a href="#">De Winkel</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><button class="btn" id="afspraak">AFSPRAAK MAKEN</button></li>

                </ul>

            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

CSS：

navbar-right li {
    font-family: Arial;
    text-transform: uppercase;
    font-weight: bold;
}

#afspraak {
    margin-top: 5%;
    background-color: #f5758e;
    font-family: Arial;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
}

#navbar-right a {
    color: white;
}

.navbar-default .navbar-brand {
    color: white !important;
    font-size: 36px !important;
}

.navbar-default {
    background: transparent !important;
    border: none !important;
    position: absolute;
}

.navbar-toggle {
   background-color: grey !important;
}

非常感谢您的帮助！

Answer 1

YoungStarDC 它发生在我们最好的人身上...检查导航栏类的第一行。您需要添加一个“

<nav class="bootstrap-iso navbar navbar-default navbar-absolute"></nav>

附： Bootstraps navbar-collapse 仅在屏幕太小无法容纳导航栏时折叠导航栏并显示按钮