在容器旁边的引导程序4中修复侧边栏
我想在容器旁边的Bootstrap 4中创建一个固定的侧栏。
例：
<main>
<aside class="p-0 float-left">
<div class="px-2 " id="sidebar">
<div class="list-group ">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div>
</aside>
<div class="bg-light">
<div class="container py-4">
Hello
</div>
</div>
<div class="bg-white">
<div class="container py-4">
Hello
</div>
</div>
</main>
除了侧边栏不固定以外，这主要起作用。 如果我删除浮动左边的类并修复边栏的位置，那么内容会在边栏下面（不是我想要的）。 所以我想知道如何在容器中创建一个固定的侧边栏。 我不关心它是在窗口的最左边还是立即离开内容，只要它不与内容重叠即可。 我已经像下面这样构造了它，所以我可以更改每个div的背景颜色，否则我可能只使用col-2作为边栏。
好吧，在这里发布我自己的答案，我终于设法解决它与我想要它。 想象更多的人想要使用类似的结构，所以在这里。
首先，你需要在main中创建一个div，然后你可以添加
<aside class="col-md-2 p-0 sticky-top float-left" style="opacity: 0.5; top: 65px;">
<div class="px-2 " id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link very long one</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div>
</aside>
<!-- Forces wrapping of content to the right, while allowing sticky top to keep working (it doesn't when you set h-100 at the sidebar) -->
<div class="col-md-2 p-0 h-100 float-left"></div>
<div>
<!-- Add all your content here -->
</div>
</div>
如果你想让它右对齐，将float-left改为float-right，它的工作原理是一样的。 您还可以在屏幕两侧添加两个侧边栏。
链接地址: http://www.djcxy.com/p/88343.html