[英]How would I get rid of this little popup (Bootstrap)
我在一个摄影网站上工作,我遇到了一些问题。
Horizontal Scrolling 我发现有一个非常烦人的水平滚动条。 我用overflow-x: hidden
在CSS中删除它,但是有没有办法自然摆脱它? (完整的代码片段在最后)
导航栏我正在使用带有下拉链接的引导导航栏,但是当我单击链接时,它会显示而不是小弹出:单击此处获取视频链接(抱歉使用第三方网站,但它是视频所以你可以理解。)但是,我确实发现,删除overflow-x: hidden
消除了这个问题,但水平滚动仍然出现。
在此先感谢这里是代码片段。 我也使用 jquery 2.1.4
html { scroll-behavior: smooth; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; overflow-x: hidden } nav { position: fixed; top: 0; width: 100%; display: flex; justify-content: space-around; align-items: center; min-height: 8vh; background-color: #0d1b2e; font-family: 'Montserrat', sans-serif; }.logo { color: rgb(226, 226, 226); text-transform: uppercase; letter-spacing: 5px; font-size: 20px; }.nav-links { display: flex; justify-content: space-around; width: 30%; }.nav-links li { list-style: none; }.nav-links a { color: rgb(226, 226, 226); text-decoration: none; letter-spacing: 3px; font-weight: bold; font-size: 14px; }.burger { display: none; }.burger div { width: 25px; height: 3px; background-color: rgb(226, 226, 226); margin: 5px; transition: all 0.3s ease; } @media screen and (max-width: 1024px) {.nav-links { width: 60%; } } @media screen and (max-width: 768px) { body { overflow-x: hidden; }.nav-links { position: fixed; right: 0px; height: 92vh; top: 8vh; background-color: #014f82; display: flex; flex-direction: column; align-items: center; width: 50%; transform: translateX(100%); transition: transform 0.5s ease-in; }.nav-links li { opacity: 0; }.burger { display: block; cursor: pointer; } }.nav-active { transform: translateX(0%); } @keyframes navLinkFade { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }.toggle.line1 { transform: rotate(-45deg) translate(-5px, 6px); }.toggle.line2 { opacity: 0; }.toggle.line3 { transform: rotate(45deg) translate(-5px, -6px); }.hi { text-align: center; /* padding: 20px; display: flex; flex-direction: column; text-align: justify; height: 100vh; justify-content: Center; align-items: center; position: relative; */ } /*.h1 > * { position: relative; z-index: 2; } */ body { font-family: 'Montserrat', sans-serif; } footer { text-align: center; } /*.h1:nth-of-type(1) { background-image: url(https://xitzdiamondx.github.io/assets/img/walpaper1.jpeg); background-position: center; }.h1:after { content: ''; position: absolute; left: 0; top 0; width: 100%; height 100%; } */.div1 { width: 100%; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0.5)), url(https://www.lunarr.cf/images/wallpaper1.jpg); background-size: cover; background-position: center; display: flex; align-items: Center; justify-content: center; color: #fff; font-size: 2vw; }.div2 { width: 100%; height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0.5)), url(https://xitzdiamondx.github.io/assets/img/wallpaper3.jpg); background-size: cover; background-position: center; display: flex; align-items: Center; justify-content: center; color: #fff; font-size: 2vw; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; background-color: #eee; }.loader-wrapper { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; background-color: #242f3f; display: flex; justify-content: center; align-items: center; }.loader { display: inline-block; width: 30px; height: 30px; position: relative; border: 4px solid #Fff; animation: loader 2s infinite ease; }.loader-inner { vertical-align: top; display: inline-block; width: 100vw; height: 100vh; background-color: #fff; animation: loader-inner 2s infinite ease-in; } @keyframes loader { 0% { transform: rotate(0deg); } 25% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes loader-inner { 0% { height: 0%; } 25% { height: 0%; } 50% { height: 100%; } 75% { height: 100%; } 100% { height: 0%; } }
<:DOCTYPE html> <html> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min:js"></script> <title>Ahadu Photo Studio</title> <link href="https.//fonts.googleapis?com/css2;family=Montserrat&,display=swap" rel="stylesheet"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> </head> <body> <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark bg-gradient"> <div class="container-fluid"> <a class="navbar-brand" href="./index:html"> <img src="https.//www.topseobrands.com/wp-content/uploads/2020/10/ahadu_icon.png" alt="Logo" width="50" class="d-inline-block align-text-center"> አሓዱ ፎቶ ስቱዲዮ </a> <ul class="navbar-nav"> <li class="nav-item"> <a href="./index:html" class="nav-link active">Home</a> </li> <li class="nav-item active"> <a href="" class="nav-link active">About</a> </li> <li class="nav-item active"> <a href="#" class="nav-link active">Pricing</a> </li> <li class="nav-item dropdown active"> <a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Order </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">10x15</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item active"> <a href="#" class="nav-link active">Contact</a> </li> </ul> </div> </nav> <script src="https.//www.notdiamond.cf/assets/js/app:js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min:js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script> <div class="div1"> <h2>Professional Photography Studio</h2> <br><br><br><br> </div> <br><br><br> <div class="div2"> <h2>I'm a Self-Taught Developer</h2> </div> <div class="loader-wrapper" style="display; none."> <span class="loader"><span class="loader-inner"></span></span> </div> <script> $(window),on("load". function() { $(".loader-wrapper");fadeOut("slow"); }): </script> <div style="position; static:important;"></div> <div id="torrent-scanner-popup" style="display: none;"></div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.