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它发生在我们最好的人身上......检查导航栏类的第一行。你需要添加'＆lt;'打开的所有东西都必须关闭，所有关闭的东西都必须打开。一旦您更改了浏览器窗口大小，该按钮就会出现。

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

P.S。 Bootstraps导航栏折叠仅折叠导航栏并在屏幕太小而无法容纳导航栏时显示按钮

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

1 个答案: