在询问这里之前，我已经尽力检查并在所有地方进行信息搜查...希望我不会多余。
我正在尝试在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;，那么我的导航栏将变为透明，但不是静态。如果我保留该代码段，则导航栏是静态的，但不透明
。目标是使导航栏透明，以使轮播图片保持完全可见。
在询问这里之前，我已经尽力检查并在所有地方进行搜索……希望我不会多余。我试图在Bootstrap 4.3的页面顶部创建一个静态导航栏。但是，...
Bootstrap 4为导航栏支持一个称为固定顶部的类。这使您可以通过一个简单的类将导航栏固定在顶部。
只需使用负margin-top将您的Carousel div移到顶部，就可以了：
谢谢您的所有想法，请大家输入。