Bootstrap 4 导航栏粘性顶部嵌套在 div 中时不起作用
Bootstrap 4 navbar sticky top doesn't work when nested in div
我是一名初学者,从 Web 应用程序开始,使用 Bootstrap 4 设计我的网站。这是一个简单的问题。
当代码像
时,导航栏不会粘在顶部
<nav class="navbar navbar-expand-sm navbar-dark sticky-top">
<div class="container" style="padding:0;">
<a class="navbar-brand text-info">The Bros</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
但是当我只改变第一和第二的顺序时它会起作用,如下所示:
(其余同上)
<div class="container" style="padding:0;">
<nav class="navbar navbar-expand-sm navbar-dark sticky-top">
因为我想把导航栏的背景做成彩色的,所以我想用第二种方法,但是导航栏没有粘在顶部。
有什么办法可以解决吗?
I would like to make the background of navbar colored
无论哪种情况,您都可以这样做。
这是第一种情况下的操作方法(单击下面的 "run code snippet" 按钮并展开到整页):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<div class="container p-0">
<a class="navbar-brand text-info">The Bros</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container mt-4">
<div class="row">
<div class="col">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
</p>
<p style="margin-top: 999px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
</p>
</div>
</div>
</main>
而第二种情况:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container p-0 sticky-top">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand text-info">The Bros</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</div>
<main class="container mt-4">
<div class="row">
<div class="col">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
</p>
<p style="margin-top: 999px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
</p>
</div>
</div>
</main>
因此,在第二种情况下,您只需将 sticky-top
class 添加到 .container
而不是导航栏。
还要注意间距的使用 classes p-0
(padding:0) and mt-4
(margin-top 4 units).
我是一名初学者,从 Web 应用程序开始,使用 Bootstrap 4 设计我的网站。这是一个简单的问题。
当代码像
时,导航栏不会粘在顶部<nav class="navbar navbar-expand-sm navbar-dark sticky-top">
<div class="container" style="padding:0;">
<a class="navbar-brand text-info">The Bros</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
但是当我只改变第一和第二的顺序时它会起作用,如下所示: (其余同上)
<div class="container" style="padding:0;">
<nav class="navbar navbar-expand-sm navbar-dark sticky-top">
因为我想把导航栏的背景做成彩色的,所以我想用第二种方法,但是导航栏没有粘在顶部。
有什么办法可以解决吗?
I would like to make the background of navbar colored
无论哪种情况,您都可以这样做。
这是第一种情况下的操作方法(单击下面的 "run code snippet" 按钮并展开到整页):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<div class="container p-0">
<a class="navbar-brand text-info">The Bros</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container mt-4">
<div class="row">
<div class="col">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
</p>
<p style="margin-top: 999px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
</p>
</div>
</div>
</main>
而第二种情况:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container p-0 sticky-top">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand text-info">The Bros</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</div>
<main class="container mt-4">
<div class="row">
<div class="col">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
</p>
<p style="margin-top: 999px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
</p>
</div>
</div>
</main>
因此,在第二种情况下,您只需将 sticky-top
class 添加到 .container
而不是导航栏。
还要注意间距的使用 classes p-0
(padding:0) and mt-4
(margin-top 4 units).