Question

我想让这个导航栏成为粘性顶部，但它不起作用。但是，我在导航元素中添加了粘性顶部，但没有任何反应。我什至尝试在容器流体和行中使用粘性顶部，但它不起作用

 <div class="container-fluid">
        <div class="row">
            <nav class="col-12 mt-3 navbar navbar-expand-sm navbar-light bg-light sticky-top">
                <button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-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 mr-auto">
                    <li class="nav-item active">
                        <a id="a-links" class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a id="a-links" class="nav-link" href="#">Man</a>
                    </li>
                    <li class="nav-item">
                        <a id="a-links" class="nav-link" href="#">Woman</a>
                    </li>
                    <li class="nav-item">
                        <a id="a-links" class="nav-link" href="#">Kids</a>
                    </li>
                    <li class="nav-item">
                        <a id="a-links" class="nav-link" href="#">Baby</a>
                    </li>
                    <!-- Dropdown menu -->
                    <li class="nav-item dropdown d-md-none d-block">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            More
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Sign in</a>
                            <a class="dropdown-item" href="#">Youe Bag</a>
                            <a class="dropdown-item" href="#">ios App</a>
                            <a class="dropdown-item" href="#">Andriod App</a>
                        </div>
                      </li>
                  </ul>
                  <form class="form-inline my-2 my-lg-0">
                    <input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
                  </form>
                </div>
              </nav>
        </div>
    </div>

Answer 1

您的代码通常没问题。我确实删除了您的容器和行，以及导航栏上的列类，但它通常有效（请参阅我的代码段）。您的问题似乎出在您没有共享的代码中（例如，您是否使用了正确的 CSS 文件？）。我确实在您的代码上方和下方添加了一些内容以显示粘性操作。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
       <h1>Stuff above</h1>
    </div>
  </div>
</div>
<nav class="navbar navbar-expand-sm navbar-light bg-light sticky-top">
  <button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
         <a id="a-links1" class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
         <a id="a-links2" class="nav-link" href="#">Man</a>
      </li>
      <li class="nav-item">
         <a id="a-links3" class="nav-link" href="#">Woman</a>
      </li>
      <li class="nav-item">
         <a id="a-links4" class="nav-link" href="#">Kids</a>
      </li>
      <li class="nav-item">
         <a id="a-links5" class="nav-link" href="#">Baby</a>
      </li>
      <!-- Dropdown menu -->
      <li class="nav-item dropdown d-md-none d-block">
         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            More
         </a>
         <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
             <a class="dropdown-item" href="#">Sign in</a>
             <a class="dropdown-item" href="#">Youe Bag</a>
             <a class="dropdown-item" href="#">ios App</a>
             <a class="dropdown-item" href="#">Andriod App</a>
          </div>
       </li>
     </ul>
     <form class="form-inline my-2 my-lg-0">
        <input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
</nav>
              
              <div class="container-fluid">
        <div class="row">
            <div class="col-12 vh-100">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>

一个小注意事项：您为链接使用了相同的 a-links ID。 ID 必须是唯一的。

Answer 2

在 row 上使用sticky-top，并将导航栏放在一个列...

<div class="container-fluid">
    <div class="row sticky-top">
        <div class="col">
            <nav class="mt-3 navbar navbar-expand-sm navbar-light bg-light">
                Nav content...
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col">
            Page content...
        </div>
    </div>
</div>

Demo

如何在bootstrap4中粘住导航栏？

2 个答案: