Bootstrap 4：如何使顶部固定的Navbar保持在容器中而不拉伸？

There are many ways to make a fixed navbar stay inside a parent's div container. We'll go over the most straightforward one here.

有很多方法可以使固定的导航栏停留在父级的div容器中。我们将在这里介绍最简单的方法。

Imagine you have the following code, modified slightly from the Bootstrap docs:

想象一下，您有以下代码，是从Bootstrap文档中稍作修改的：

<div class="container"><nav class="navbar navbar-fixed-top navbar-inverse bg-inverse"><button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button><div class="collapse navbar-toggleable-md" id="navbarResponsive"><a class="navbar-brand" href="#"><img src="" width="30" height="30" class="d-inline-block align-top" alt="">Navbar</a><ul class="nav navbar-nav float-md-right"><li class="nav-item active"><a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li></ul></div></nav><div class="next"></div>hello
</div>

div.next {background-color: lightblue;width: 100%;height: 60rem;
}

And your page looks like this:

您的页面如下所示：

解决方案 (Solutions)

While the docs read "Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width," the easiest solution is to use CSS to set the width of the navbar directly:

当文档阅读“导航栏及其内容默认情况下是可变的。使用可选容器限制其水平宽度”时，最简单的解决方案是使用CSS直接设置导航栏的宽度：

div.next {background-color: lightblue;width: 100%;height: 60rem;
}.container {padding: 0px;
}nav.navbar {width: inherit;top: 0%;left: 50%;transform: translateX(-50%);
}

By adding rules targeting .container and nav.navbar, your navbar is now the same width as the parent's container:

通过添加针对.container和nav.navbar规则，您的导航栏现在与父容器的宽度相同：