我正在尝试使用Bootstrap构建一个网站，并且我发现了导航栏的问题。尽管我使用的是“固定顶级”课程，但只要我向下滚动它就不会保持在最佳状态。
我认为这是创建页面的幻灯片的相对位置的问题，但我不知道如何修复它，而且我没有在网上找到任何内容。
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
.nav-titolo {
float: left;
text-align: center;
}
.navbar-brand {float:none;}
#titolo {
height: 200px;
font-size: 400%;
font-family: Bree Serif;
}
html {
height: 100%;
overflow: hidden;
}
body {
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Bree Serif;
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
.back {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
/*
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
*/
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("https://lorempixel.com/640/480/abstract/6/");
z-index:2;
}
#title h1 {
transform: translateZ(.25px) scale(.75);
transform-origin: 50% 100%;
}
#slide1:before {
background-image: url("https://lorempixel.com/640/480/abstract/4/");
transform: translateZ(-1px) scale(2);
}
#slide2 {
background-image: url("https://lorempixel.com/640/480/abstract/3/");
z-index:2;
}
#slide3:before {
background-image: url("https://lorempixel.com/640/480/abstract/5/");
transform: translateZ(-1px) scale(2);
}
#slide4 {
background: #222;
}
.navbar{
background:#F97300;
}
.nav-link , .navbar-brand{
color: #f4f4f4;
cursor: pointer;
}
.nav-link{
margin-right: 1em !important;
}
.nav-link:hover{
background: #f4f4f4;
color: #f97300;
}
.navbar-collapse{
justify-content: flex-end;
}
.navbar-toggler{
background:#fff !important;
}
.overlay{
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(244, 244, 244, 0.79);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<link rel= "stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet prefetch" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class = "nav-titolo"><a class="navbar-brand" href="#">Colorizer</a></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#slide1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide3">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide4">Section 4</a>
</li>
</ul>
</nav>
<div id="title" class="slide header">
<h1 id = "titolo"> Colorizer </h1>
</div>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
<img class="back" src="https://lorempixel.com/640/480/abstract/6/">
<img class="back" src="https://lorempixel.com/640/480/abstract/4/">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide4" class="slide header">
<h1>The End</h1>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
答案 0 :(得分：0)
怎么样： CSS：
.navbar {
position: fixed;
top: 0;
}
答案 1 :(得分：0)
使用CSS，您可以添加以下代码：
.navbar {
position: fixed;
}
到您的navbar类。这将确保导航栏将保持在屏幕顶部。
答案 2 :(得分：0)
在bootstrap.css的第4202行附近，应该调用该类.navbar-fixed-top。
from django.db import models
from django.contrib.auth.models import Userfrom datetime import date
from django.db.models.signals import post_save
class Device(models.Model):
user = models.ForeignKey(User)
mac = models.CharField(max_length=17, default='00:00:00:00:00:00', unique=True)
devicename = models.CharField(max_length=20, default='', unique=True)