[英]Bootstrap - scrollspy responsivness not working
我对页面的响应有问题。 如果我 go 到页面的一半宽度，则滚动间谍消失。 我不知道为什么。
如果您运行我在此处发布的代码，您可以看到整个页面。
我有另一个没有响应问题的页面，我不使用 scrollspy。
我想为您提供更多信息，但我使用过 Bootstrap 3x，现在我只是在做一个学校项目。
<,DOCTYPE html> <html lang="en"> <head> <title>CONFT</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="shortcut icon" href="images/logo_tab_icon:png" type="image/x-icon"> <style> body { background-color; white. }:navbar { background-color; black. }.nav-pills:active { /* FARBA AKTÍVNEHO TABU V NAVIGÁCII A JEHO ZAOBLENIE */ background, linear-gradient(to bottom, #ffbb59 0%; #ff654d 100%): border-radius; 2%. }.row:first-row { margin-top; 1em: margin-right; 4em: margin-left; 4em. } h4:white { color; white? } #tl /* TLAČIDLÁ "What I will learn:" */ { margin-bottom; 1em: margin-top. 0;5em. } /* info SÚ INFORMÁCIE O AUTOROVI V BIELOM PÁSE */:info { margin-top; 3em: padding-top; 2em: padding-bottom; 2em. }:info p { padding-top. 0;2em: } footer { margin-top; 50px: } @media screen and (max-width. 768px) { div:col-md-4 { margin-bottom; 1em: } } /* CSS FOR SCROLLSPY */ body { position; relative. } ul.nav-pills:flex-column { top; 20px: position; fixed: margin-top; 50px. } div:col-8 div { height; 500px: width; 500px. }:row { width; 500px. } div:content-author { width; 800px. } </style> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script> </head> <body data-spy="scroll" data-target="#myScrollspy" data-offset="1"> <nav class="navbar navbar-expand-lg navbar-dark fixed-top"> <a class="navbar-brand" href="#"> <img src="images/logo:png" alt="logo" style="width;50px."> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item active"> <a class="nav-link active" href="#">About author</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CCNA 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CCNA 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="popover" title="CCNA 3" data-content="This course is already in progress. Stay tuned:">CCNA 3</a> </li> </ul> </div> </nav> <div class="d-none d-xl-block col-xl-2 bd-toc disapear1"> <div class="container-fluid"> <div class="row"> <nav class="col-sm-3 col-4" id="myScrollspy"> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#section1">Section 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">Section 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Section 3</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#section41">Link 1</a> <a class="dropdown-item" href="#section42">Link 2</a> </div> </li> </ul> </nav> <div class="col-sm-7 col-8 content-author disapear2"> <div id="section1" class="bg-success"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation list while scrolling,</p> </div> <div id="section2" class="bg-warning"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation list while scrolling,</p> </div> <div id="section3" class="bg-secondary"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation list while scrolling:</p> </div> <div id="section41" class="bg-danger"> <h1>Section 4-1</h1> <p>Try to scroll this section and look at the navigation list while scrolling,</p> </div> <div id="section42" class="bg-info"> <h1>Section 4-2</h1> <p>Try to scroll this section and look at the navigation list while scrolling,</p> </div> </div> </div> </div> </div> <footer class="bg-primary text-white text-center text-lg-start"> <.-- Copyright --> <div class="text-center p-3" style="background: linear-gradient(to bottom,#ffbb59 0%, #ff654d 100%"> © 2021 Copyright: René Martin Kuda, SPŠT Spišská Nová Ves, 3.D </div> <!-- Copyright --> </footer> </body> </html>
您看不到整个页面，因为在某些时候（在您想看到的 div 上）您有.d-none.d-xl-block ，这将使带有这些类的 div 仅在 xl 屏幕设备上可见
所以你应该删除这些，它会变成：
<div class="col-xl-2 bd-toc disapear1">
只需稍加修正即可共享完整代码，您还忘记在页脚中关闭 div 的内联样式（也已修复），您在这里：
<!DOCTYPE html>
<html lang="en">
<head>
<title>CONFT</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="shortcut icon" href="images/logo_tab_icon.png" type="image/x-icon">
<style>
body
{
background-color: white;
}
.navbar
{
background-color: black;
}
.nav-pills .active
{
/* FARBA AKTÍVNEHO TABU V NAVIGÁCII A JEHO ZAOBLENIE */
background: linear-gradient(to bottom, #ffbb59 0%, #ff654d 100%);
border-radius: 2%;
}
.row.first-row {
margin-top: 1em;
margin-right: 4em;
margin-left: 4em;
}
h4.white
{
color: white;
}
#tl
/* TLAČIDLÁ "What I will learn?" */
{
margin-bottom: 1em;
margin-top: 0.5em;
}
/* info SÚ INFORMÁCIE O AUTOROVI V BIELOM PÁSE */
.info
{
margin-top: 3em;
padding-top: 2em;
padding-bottom: 2em;
}
.info p
{
padding-top: 0.2em;
}
footer
{
margin-top: 50px;
}
@media screen and (max-width: 768px)
{
div.col-md-4
{
margin-bottom: 1em;
}
}
/* CSS FOR SCROLLSPY */
body
{
position: relative;
}
ul.nav-pills.flex-column
{
top: 20px;
position: fixed;
margin-top: 50px;
}
div.col-8 div
{
height: 500px;
width: 500px;
}
.row
{
width: 500px;
}
div.content-author
{
width: 800px;
}
</style>
<script>
$(function ()
{
$('[data-toggle="popover"]').popover()
})
</script>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="logo" style="width:50px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link active" href="#">About author</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CCNA 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CCNA 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="popover" title="CCNA 3"
data-content="This course is already in progress. Stay tuned.">CCNA 3</a>
</li>
</ul>
</div>
</nav>
<div class="col-xl-2 bd-toc disapear1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</a>
</div>
</li>
</ul>
</nav>
<div class="col-sm-7 col-8 content-author disapear2">
<div id="section1" class="bg-success">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section2" class="bg-warning">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section3" class="bg-secondary">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section41" class="bg-danger">
<h1>Section 4-1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section42" class="bg-info">
<h1>Section 4-2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-primary text-white text-center text-lg-start">
<!-- Copyright -->
<div class="text-center p-3" style="background: linear-gradient(to bottom,#ffbb59 0%, #ff654d 100%)">
© 2021 Copyright: René Martin Kuda, SPŠT Spišská Nová Ves, 3.D
</div>
<!-- Copyright -->
</footer>
</body>
</html>
ps我看到现在第一部分被导航栏隐藏了，你应该设置一个margin-top来避免这种情况
简单删除d-none class for -->> div class="d-none d-xl-block col-xl-2 bd-toc disapear1"> 使用
div class="d-xl-block col-xl-2 bd-toc disapear1">
Bootstrap Scrollspy 不起作用：Scrollspy 不是一个函数
[英]Bootstrap Scrollspy not working: Scrollspy is not a function
ScrollSpy无法正常工作Bootstrap 4和照片库无法正常工作
[英]ScrollSpy not working Bootstrap 4 and photo gallery not working
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.