繁体   English   中英

我将如何摆脱这个小弹出窗口(引导程序)

How would I get rid of this little popup (Bootstrap)

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我在一个摄影网站上工作,我遇到了一些问题。

问题一:

Horizontal Scrolling 我发现有一个非常烦人的水平滚动条。 我用overflow-x: hidden在CSS中删除它,但是有没有办法自然摆脱它? (完整的代码片段在最后) 在此处输入图像描述

问题 2:

导航栏我正在使用带有下拉链接的引导导航栏,但是当我单击链接时,它会显示而不是小弹出:单击此处获取视频链接(抱歉使用第三方网站,但它是视频所以你可以理解。)但是,我确实发现,删除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&amp,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>

问题暂未有回复.您可以查看右边的相关问题.
1 如何消除页面周围的黑色小边框?

我的页面周围有一个黑色的小边框,位于左侧和顶部。 我可以摆脱它,但是我想拉伸背景。 如果我做到了,它不会拉伸,它就会消失。 我不要 当我不拉伸它时,它会重复。 我要它同时做。 这是我的CSS。 body { background: url(background.png ...

2016-03-19 18:47:44 2 31   css3
3 这个小黑匣子是什么,我如何摆脱它?

我为TI AM335x EVM使用Qt 5.2构建了一个应用程序,它显示了一个小黑框(请参见下图)。 它看起来像一个突出显示的光标,当我触摸屏幕上的任何位置时,它都会闪烁(每次触摸大约一次)。 如果它是光标..我不要在那儿(我的项目中没有鼠标/键盘,只需触摸屏),那么我该如何摆脱它? ...

4 如何摆脱 VSCode 中的这个弹出窗口?

当我开始在对象中输入新属性时,这个小弹出窗口似乎一直出现。 它阻止我向上/向下移动行,因为向上/向下箭头滚动框的内容。 很抱歉,感觉就像 MS Word 中 Clippy 的 VSCode 版本! 我尝试了以下用户设置无济于事 ...

5 我如何摆脱这个无限循环?

有没有一种方法可以将用户输入的cpi乘以两倍,以便while cpi &lt;= (cpi * 2)不会给我无限循环? 此外,是否有一种方法允许用户输入浮点数,以使其不返回Bad input错误? 非常感谢所有帮助。 ...

6 我将如何摆脱 [(TEST,)]

我需要从 postgres 数据库中提取一个条目并将其发布到 twitter。 我想出了以下内容(仍然非常基本): 它有效,但最终在 twitter 上看起来像:[(TEST,)] 我该如何摆脱这些东西? ...

7 如何摆脱弹出广告?

今天,我醒来后发现,我的两个网站都展示了一个隐藏广告。 我使用http://tools.pingdom.com进行了跟踪,并找到了引起它的javascript。 横幅广告?tid = SWTMPOP&tagid = 2 这就是让我进入的地方, http: //clktag.com/ad ...

8 我如何摆脱这个烦人的空白弹出窗口

对不起,我的问题标题的措辞。 我有一个基本的HTML锚标记,单击该标记时会弹出一个对话框,以从其他网站下载文件。 我正在使用target="_blank"的属性,以便单击超链接时,不会离开主窗口。 这是所有容易的部分(如果真的很简单,我不会在这里)。 但是,当我执行上述操作并 ...

9 如何摆脱Debug Error弹出窗口?

Microsoft Visual C ++运行时库在调用abort时提供弹出窗口,为用户提供Abort,Retry或Ignore选项。 我想绕过这个盒子然后打电话给中止。 我有一个信号处理程序设置来处理我想要的代码退出和处理中止代码可能是时间敏感的,所以我需要中止代码而不必手动选择中止。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM