Fixed sidebar in bootstrap 4 next to container

I want to create a fixed sidebar in Bootstrap 4 next to a container.

Example:

<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>

This mostly works, except the sidebar isn't fixed. If I remove the float-left class and fix the position of the sidebar then the content gets under the sidebar (not want I want). So I was wondering how I can create a fixed sidebar left to the container. I don't care if it's at the far left side of the window or immediately left to the content, as long as it doesn't overlap with the content. I have structured it like below so I can change the background color of each div, otherwise I could've just used a col-2 for the sidebar for example.

---

OK, going to post my own answer here, I finally managed to solve it with how I've wanted it. Figured more people wanted to use a similar structure, so here it is.

First, you need to create a div inside main, then you can add

<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>

If you want it right-aligned, change float-left to float-right, it'll work the same. You can also add two sidebars at both sides of the screen.

链接地址: http://www.djcxy.com/p/88344.html

上一篇: 在CSS中编码“content：”字符？

下一篇: 在容器旁边的引导程序4中修复侧边栏