停止导航栏的固定位置更改路线

Question

我当前正在使用以下引导程序代码创建导航栏：

<div class="nav-wrap">
    <div class="container">
        <nav class="navbar navbar-expand-lg">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a id="logo" class="nav-link" href="#">Lattes <span class="sr-only">(current)</span></a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="nav-link right-link" href="#">About</a></li>
                    <li><a class="nav-link right-link" href="#">Services</a></li>
                    <li><a class="nav-link right-link" href="#">Portfolio</a></li>
                    <li><a class="nav-link right-link" href="#">Team</a></li>
                    <li><a class="nav-link right-link" href="#">Contact</a></li>

                </ul>
            </div>
        </nav>
    </div>
</div>

这产生了预期的结果，其右侧的链接和左侧的标题是这样的：

我正在尝试将导航栏的位置固定在屏幕顶部，以使导航栏始终位于具有以下css的用户窗口的顶部：

    .navbar {
        background-color: #222222;
        border-radius: 5px; 
        position:fixed;
    }

这可以使条形图保持在屏幕顶部，但是会破坏对齐方式，并且使条形图中的所有元素左对齐：

是否有解决方案可将导航栏固定到该位置而无需更改对齐方式？

Answer 1

也许您的.navbar最初的位置不是“固定”。

我建议您将position: fixed;添加到“ nav-wrap”元素中。