bootstrap 5侧边栏出现在块内容上方，如何使其粘在左侧答案

【问题标题】：bootstrap5 sidebar appears above the block content, how to make it sticky-leftbootstrap 5侧边栏出现在块内容上方，如何使其粘在左侧
【发布时间】：2021-07-10 01:26:05
【问题描述】：

我按照 python 速成课程书的建议，使用 bootstrap5 创建了一个 Django 博客。
我的所有模板都扩展了 base.html，其中我有如下代码。
问题是无论我尝试什么，它总是在我的块内容之上、之间或之下，我不知道如何“覆盖”我的块并将我的侧边栏粘贴到左侧。在代码下，我将发布带有我的小绘画可视化的图像。上一个是现在的样子，第二个是我想要的样子。

<body>
  <nav>
    <!--thats sticky top navbar i'll skip this cause it work good -->
  </nav>
       <div class="container-fluid">
            <div class="row w-50 flex-column flex-md-row">
                <aside class="col-12 col-md-3 col-xl-2 p-0 bg-dark flex-shrink-1">
                    <nav class="navbar navbar-expand-md sticky-start navbar-dark bd-dark
                    flex-md-column flex-row align-items-center py-2 text-center" id="sidebar">
                        <div class="text-center p-3">
                            <img src="..." alt="profile picture" class="img-fluid rounded-circle my-4 p-1 d-none d-md-block shadow">
                            <a href="#" class="navbar-brand mx-0 font-weight-bold text-nowrap">RETOVSKEJ</a>
                        </div>
                        <button type="button" class="navbar-toggler border-0 order-1"
                                data-toggle="collapse" data-target="#nav" aria-controls="nav"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse order-last" id="nav">
                            <ul class="navbar-nav flex-column w-100 justify-content-center">
                                <li class="nav-item">
                                <a href="#" class="nav-link active">Edit profile</a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">Projects</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </aside>
            </div>
        </div>

        <div class="container">
            {% block header %}{% endblock header %}
            {% block content %}{% endblock content %}
        </div>
</body>

感谢大家的帮助。

【问题讨论】：

我正在使用带有 bootstrap5 的烧瓶并遇到完全相同的问题。我的侧边栏将只占用一个屏幕而不是右侧的内容。然后我的内容将在我向下滚动后出现。找到解决方案后我会通知您

标签： html css django bootstrap-4 bootstrap-5

【解决方案1】：

style="postion: fixed; margin-top: 300px;"

在

<div class="container-fluid">

工作。

【讨论】：