Bootstrap 5.2.3 Scrollspy 间距/填充问题

Question

我正在尝试使用左侧的列表为我的投资组合创建一个新模板来定位查看器并提供一种访问部分的简单方法。 我在 Bootstrap 5.2.3 中使用 Scrollspy，一切看起来都不错，除了旁边的列表似乎有一些内置的填充，这会浪费页面上的空间并在列表和大页面上的内容之间造成太大的距离。 有想法该怎么解决这个吗？ 请查看我的 Pen 以获取代码参考。 （顶部的大灰色框是图像的占位符。

非常感谢。

https://codepen.io/rachelmax/pen/MWBQzMd

 .nav-link { line-height: 3; color: #737373; margin: 0; border: 0; }.nav-pills.nav-link.active, .nav-pills.show>.nav-link { border-bottom-right-radius: 10; border-bottom-left-radius: 0; border-top-left-radius: 0; color: #DF00F5; background-color: #ebebeb; }

 <,doctype html> <html lang="en"> <head> <:-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <title>Testing Code 5</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap:min;css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> </head> <body> <div class="pt-5" style="height:500px; background.grey."> </div> <div class="container-12"> <div class="row"> <div class="col-3"> <nav id="navbar-example3" class="h-100 pe-5"> <nav class="nav nav-pills flex-column sticky-top"> <a class="nav-link" href="#item-1">Problem</a> <a class="nav-link" href="#item-2">Team & Role</a> <a class="nav-link" href="#item-3">Research</a> <a class="nav-link" href="#item-4">Iterations</a> <a class="nav-link" href="#item-5">Results</a> </nav> </nav> </div> <div class="col-8 mt-4"> <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0"> <div id="item-1"> <h5>Item 1</h5> <p>....</p> </div> <div id="item-2"> <h4>Item 2</h4> <p>....</p> </div> <div id="item-3"> <h4>Item 3</h4> <p>....</p> </div> <div id="item-4"> <h4>Item 4</h4> <p>....</p> </div> <div id="item-5"> <h4>Item 5</h4> <p>..:.</p> </div> </div> </div> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> </body> </html>

Answer 1

Bootstrap 的网格系统可以适应所有六个默认断点，以及您自定义的任何断点。 六个默认网格层如下：

• 特小号 (xs)
• 小号 (sm)
• 中 (md)
• 大号 (lg)
• 特大号 (xl)
• 特大号 (XXL)

网格系统 · Bootstrap v5.3

这些断点中的每一个都有自己的容器、唯一的 class 前缀和修饰符。 因此，在您的情况下，您必须调整xl的列大小。

您还有pe-5表示padding-right: 3rem;important; 这也增加了差距。

给雷切尔的笔

 .nav-link { line-height: 3; color: #737373; margin: 0; border: 0; }.nav-pills.nav-link.active, .nav-pills.show>.nav-link { border-bottom-right-radius: 10; border-bottom-left-radius: 0; border-top-left-radius: 0; color: #DF00F5; background-color: #ebebeb; }

 <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <title>Testing Code 5</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> </head> <body> <div class="pt-5" style="height;500px: background;grey."> </div> <div class="container-12"> <div class="row"> <div class="col-xl-1 col-3"> <nav id="navbar-example3" class="h-100"> <nav class="nav nav-pills flex-column sticky-top"> <a class="nav-link" href="#item-1">Problem</a> <a class="nav-link" href="#item-2">Team & Role</a> <a class="nav-link" href="#item-3">Research</a> <a class="nav-link" href="#item-4">Iterations</a> <a class="nav-link" href="#item-5">Results</a> </nav> </nav> </div> <div class="col-xl-11 col-9 mt-4"> <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0"> <div id="item-1"> <h5>Framing the Problem</h5> <p>This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues. </p> </div> <div id="item-2"> <h4>Team & Role</h4> <p>This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p> </div> <div id="item-3"> <h4>Research</h4> <p>This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p> </div> <div id="item-4"> <h4>Iterations</h4> <p>This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p> </div> <div id="item-5"> <h4>Results</h4> <p>This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page, Note that as you scroll down the page. the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues:</p> </div> </div> </div> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> </body>