如何在 bootstrap 4 中置顶导航栏？
How to sticky top a navbar in bootstrap4?
我想让这个导航栏置顶，但它不起作用。但是，我将粘性顶部添加到导航元素，但没有任何反应。我什至尝试在 container-fluid 和 row 中使用 sticky top 但它不起作用
<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>
您的代码总体上没问题。我确实删除了您的容器和行，以及导航栏上的 class 列，但它通常有效（请参阅我的代码段）。您的问题似乎出在您没有共享的代码中（例如，您使用的 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 必须是唯一的。
在row上使用粘顶，并将导航栏放在列...
<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>
我想让这个导航栏置顶，但它不起作用。但是，我将粘性顶部添加到导航元素，但没有任何反应。我什至尝试在 container-fluid 和 row 中使用 sticky top 但它不起作用
<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>
您的代码总体上没问题。我确实删除了您的容器和行，以及导航栏上的 class 列，但它通常有效（请参阅我的代码段）。您的问题似乎出在您没有共享的代码中（例如，您使用的 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 必须是唯一的。
在row上使用粘顶，并将导航栏放在列...
<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>