【发布时间】：2020-02-05 03:24:59
【问题描述】：
在问这里之前，我已经尽我所能检查并在所有地方搜索信息......希望我不是多余的。
我正在尝试在 Bootstrap 4.3 的页面顶部创建一个静态导航栏。
但是，无论我怎么努力，它似乎都不起作用：
- 我已经尝试了一些以前的 .static-top / .navbar-static-top 类和其他类似的解决方法；
- 我也尝试过安装插件（由于效率低下，我现在已将其删除） - 虽然这主要是“隐藏”导航栏，而不是让它在页面的最顶部保持静态。
- 我尝试在相关元素上使用“top: 0;”和其他格式标记修改我的 CSS，但无济于事。
我再次清理了我的代码，以避免把事情搞得一团糟。 （我之前的 Bootstrap 尝试以不可用的代码完成，因此我试图保持干净，并删除未使用/不必要的代码）
感觉很失落。不是“超级程序员”，主要是具有大量逻辑理解的平面设计师。并且迫切希望拥有某种默认功能来使我的导航栏保持静态。
关键是我的导航栏必须保持透明（使用某些类时并非总是如此）
这是我的代码。
/* 0. HTML Defaults
-----------------------------------------------------------------------------------------------------------------------------*/
:root {
--da-pink: lightpink;
--da-grey: rgba(5,5,5,1);
--da-grey: #454545;
--da-grey-grad: linear-gradient(to bottom right, #131313, #454545);
--da-grey-opac: rgba(69, 69, 69, .8);
--da-grey-opac: rgb(69, 69, 69);
}
html, body {
background-color: black;
background: rgba(65,65,65,1);
background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
height: 100%;
overflow: auto;
z-index: 10;
}
html body * {
}
h1 {
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
color: lightpink;
font-size: 3vw;
line-height: 4vw;
}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
p {
font-family: itc-american-typewriter, serif;
font-weight: 300;
font-style: normal;
font-size: 12.5pt;
color: #ffffff;
text-align: justify;
text-decoration: none;
/* text-indent: 50px; */
/* word-spacing: 5px */
/* white-space: pre; */
letter-spacing: 1px;
/* line-height: 1.3; */
/* padding: 50px; */
display: block;
border:0;
}
p a:link {
text-decoration: none;
border-bottom: dotted;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:visited {
text-decoration: none;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:hover {
text-decoration: none;
border-bottom: dotted;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p a:active {
color: lightpink;
font-family: century-gothic, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 12.5pt;
color: lightpink;
}
p.error {}
a,
a:link {}
a:hover {}
/* 10. NAV
-----------------------------------------------------------------------------------------------------------------------------*/
body > #nav_desktop {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#nav_desktop > *,
#nav_desktop > div {
background: none !important;
/* background: rgba(0, 0, 0, .0) !important; */
}
.navbar {
margin-bottom: 0;
padding: 0 0;
z-index: 100;
}
/*
.navbar-toggle {
padding-top: 15px;
margin-top: 0px;
margin-bottom: 0;
} */
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translate(-50%);
}
.nav_text {
font-family: itc-american-typewriter, serif;
font-weight: 300;
font-style: normal;
font-size: 12.5pt;
color: #ffffff;
letter-spacing: 2px;
}
/* 50. Header
-----------------------------------------------------------------------------------------------------------------------------*/
header {}
/* 60. Carousel Hero slider
-----------------------------------------------------------------------------------------------------------------------------*/
.carousel {
top:0;
}
.hero-text {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('./logo_transp.png');
background-size: auto;
background-repeat: no-repeat;
background-position: center -50px;
text-shadow: 1px 1px 3px black;
text-align: center;
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -75%);
}
.carousel,
.item,
.active {
height:100vh;
}
.carousel-inner {
height:100vh;
}
.carousel-inner img {
margin: auto;
}
/* Zz. Bootstrap edit
-----------------------------------------------------------------------------------------------------------------------------*/
.overlay {
background: black;
opacity: 0.7;
/* background-size: cover; */
}
button {
display: inline-block;
border: 1px solid;
border-color: white;
padding: 10px 10px;
margin: 0;
text-decoration: none;
background: none;
color: white;
font-family: century-gothic, sans-serif;
font-weight:700;
font-style: normal;
font-size: 12 pt;
text-align: center;
}
button:hover,
button:focus {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
button:focus {
outline: 1px solid transparent;
outline-offset: -4px;
}
button:active {
transform: scale(0.99);
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.responsive-image {
max-width: 100%;
height: auto;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}<!DOCTYPE html>
<html>
<head>
<title>Welcome to the Design Angels</title>
<!-- META DATA -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to theDesignAngels, we make it look glittery and shiny."/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="files/lib/jQuery.js"></script>
<script src="files/lib/lib/popper/Popper.js"></script>
<!-- BOOTSTRAP CSS -->
<script src="files/lib/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="files/lib/bootstrap.min.css">
<!-- Libraries & frameworks -->
<script src="functions.js"></script>
<link rel="stylesheet" style="text/css" href="style.css"/>
<link rel="stylesheet" href="xxx">
<link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon" />
</head>
<body>
<!-- NAVBAR -->
<nav id="nav_desktop" class="navbar navbar-expand-md" role="navigation">
<!-- Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="logo_menu.png" style="width:180px;height:auto" alt="the Design Angels" data-toggle="tooltip" title="home"></a>
<!-- Collect the nav links, forms, and other content -->
<!-- Site nav -->
<ul class="nav navbar-nav navbar-center">
<li><a href="#services">
<span class="nav_text">SERVICES</span>
</a>
</li>
<li><a href="#portfolio">
<span class="nav_text">PORTFOLIO</span>
</a>
</li>
<li><a href="#contact">
<span class="nav_text">CONTACT</span>
</a>
</li>
</ul>
<!-- Social media -->
<ul class="nav navbar-nav ml-auto">
<li><a href="http://facebook.com/thedesignangels" target="_blank" alt="The Design Angels on Facebook">
<img src="social/fb_.png" onmouseover="this.src='./social/fb_mouseov.png'" onmouseout="this.src='./social/fb_.png'" style="height: 15px; margin-top: -5px;" >
</a>
</li>
<li><a href="https://www.instagram.com/thedesignangels/" target="_blank" alt="The Design Angels on Instagram">
<img src="social/inst_.png" onmouseover="this.src='./social/inst_mouseov.png'" onmouseout="this.src='./social/inst_.png'" style="height: 15px; margin-top: -5px;" >
</a>
<li><a href="https://twitter.com/thedesignangels" target="_blank" alt="The Design Angels on Twitter">
<img src="social/twit_.png" onmouseover="this.src='./social/twit_mouseov.png'" onmouseout="this.src='./social/twit_.png'" style="height: 15px; margin-top: -5px;" >
</a>
</li>
</ul>
</div>
</nav>
<!-- CAROUSEL HERO -->
<div id="myCarousel " class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slider-01.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-02.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-03.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-04.jpg" class="overlay">
</div>
<div class="carousel-item">
<img src="slider-05.jpg" class="overlay">
</div>
</div>
<!-- Hero Text -->
<div class="hero-text container">
<h1 class="hero-cust">Looking for Character<br> and Innovation ?</h1><br> <br>
<p style="text-align: center;">The Design Angels have solutions for you,<br> on top of offering advice and custom-made designs</p><br> <br>
<a href="#contact"><button>GET IN TOUCH</button></a>
</div>
</div>
<!-- Introduction -->
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="padding-top:50px;">
<h1>Great design<br>
is powerful</h1>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
<p class="tab">Not only does it brings personality and brand recognition to goods or services,
but it establishes a recognition and creates the <span style="color:lightpink;">feeling of trust</span> we feel for those brands we love.<br> <br> <br></p>
<p class="tab">Set yourself above the competition with professional design and packaging: <span style="color:lightpink;">great communication</span> shows the world how serious you are about business.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
<img src="mockup.png" class="responsive-image" style="width:200px; height: auto; vertical-align: top; float: right;" >
</div>
</div>
</div>
</div><br><br><br>
<!-- Services -->
<div class="container-fluid overlay"><br>
<div class="container">
<h1 style="text-align:center;">Our services</h1><br><br>
<p style="text-align:center;">We always go the extra mile to bring you kick-ass design.</p><br><br><br>
</div>
<div class="container">
<div class="row" style="padding-bottom: 50px;">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 specialties clearfix"><br>
<p style="text-align:center;">
<img src="drukwerk.png"><br><br><br>PRE-PRESS SPECIALTY<br><br>
Packagings, posters, cards, flyers,
letterheads, banners, calendars,
brochures, books, stickers,
custom work... <br><a href="#" alt="Learn more about pre-press possibilities">Know more</a><br>
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 specialties clearfix"><br>
<p style="text-align:center;">
<img src="illu.png"><br><br>ILLUSTRATION & <br>IMAGE<br><br>
Commercial illustration for packaging,
small animations, logo & branding,
photoshopping, vector illustrations,
paintings... <br><a href="#" alt="Learn more about illustration and image-creation possibilities">Know more</a>
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 specialties clearfix"><br>
<p style="text-align:center; ">
<img src="digi.png"><br><br>DIGITAL & <br>WEB<br><br>
Banners, animated GIFs, brochures,
PDFs, web sites, videos, social media content... <br><a href="#" alt="Learn more about digital and content-creation possibilities">Know more</a>
</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="script.js">
</script>
</body>
</html>提前感谢您。 安吉。
=================================
更新：
在 CSS 中，如果我从 body > #nav_desktop { 中删除 position: absolute;，那么我的导航栏就会变得透明，但 不是静态的 >.
如果我把 sn-p 留在里面，导航栏 是静态的，但不透明。
目的是使导航栏透明，以便轮播图片保持完全可见。
【问题讨论】：
-
带有静态导航栏是指顶部的固定栏吗？因为 css 引导调用是 fixed_top 。看这个例子https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/
-
您好，感谢您的回复。在顶部是的，但不是固定的 - 固定意味着当您滚动时，导航栏保持浮动在顶部 - 而“静态”意味着它停留在页面顶部（例如，不浮动在所有内容的顶部）你向下滚动。这是我要尝试的第二个。
-
对我来说，不清楚你想要实现什么...你能提供一个你想要什么的例子吗？这是docs关于导航栏boostrap 4你尝试什么？
-
这个来自 Bootstrap 3 的例子展示了一个静态导航栏：bootstrapk.com/examples/navbar-static-top
-
Navbar-fixed-top 只是还在这里，因为一些插件会寻找这个类来触发隐藏。否则它不应该在这里（或有“navbar-static-top”）
标签： html css bootstrap-4 static navbar