我对页面的响应性有问题。如果我转到页面的一半宽度，scrollspy 就会消失。我不知道为什么。
如果你运行我在这里发布的代码，你可以看到整个页面。
我有另一个页面没有响应问题，在那里我不使用 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>答案 0 :(得分：1)
您无法看到整个页面，因为在某些时候（在您想要查看的 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>
附言我看到现在第一部分被导航栏隐藏了，你应该设置一个 margin-top 来避免这种情况
答案 1 :(得分：1)
Simple Remove 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">