Bootstrap 5 导航栏和固定顶部位置答案

【问题标题】：Bootstrap 5 navbar and fixed-top positionBootstrap 5 导航栏和固定顶部位置
【发布时间】：2023-03-25 00:55:01
【问题描述】：

我正在尝试使用带有固定顶部类的导航栏，以便菜单在折叠时不会下拉页面元素。但是当我使用固定顶部类时，导航栏将越过容器（宽度），就好像它在容器流体内一样，而我使用容器类将菜单和站点放在页面中间（不是全宽）。有没有办法拥有一个固定顶部但不是全宽的导航栏？

这是代码：

<div class="container" style="border: 1px solid;">
        <nav class="navbar fixed-top navbar-expand-lg">
          <div class="container-fluid">
            <a class="navbar-brand" href="#"><img src="n-img/logo.png" class="img-responsive"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link" aria-current="page" href="n-index.php">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Chi Siamo</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Dove Siamo</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contatti</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
    </div> <!-- end container -->

【问题讨论】：

标签： css bootstrap-5

【解决方案1】：

使用 position:fixed 时，该元素会从正常的 DOM 流中移除，因此它不再与其他页面元素（包括其父容器）相关。

如果要将导航栏限制为容器宽度，请使用容器inside导航栏来包裹导航栏内容...

<nav class="navbar fixed-top navbar-expand-lg">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="n-img/logo.png" class="img-responsive"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="n-index.php">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Chi Siamo</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Dove Siamo</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contatti</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

https://codeply.com/p/AFQj4wf6DD

【讨论】：