正文部分位于侧边栏后面

Question

我有一个 Bootstrap 5 网页，该网页在加载时按预期显示，带有移动导航栏和正文部分以显示/隐藏完整侧边栏的切换按钮。

唯一的问题是当我使用切换按钮时，正文部分位于侧边栏后面。

html 文件部分：

{% extends "base.html" %}
{% block content %}

<!-- Sidebar section -->
<nav class="navbar navbar-expand d-flex flex-column align-item-start" id="sidebar">
  <div class="p-4 pt-5">

<!-- User image -->
  <div class="text-center">
    <img src="{{url_for('static',filename='profile_pics/two.jpg')}}" class="rounded" alt="Profile">
  </div>

 <!-- Navbar menus -->
  <ul class="navbar-nav d-flex flex-column mt-5 w-100">
      <li class="nav-item dropdown w-100">
        <a href="#equitiesSubmenu" class="nav-link dropdown-toggle text-light pl-4" id="equitiesSubmenu" role="button" data-bs-toggle="collapse" aria-expanded="true">Equities</a>
        <ul class="collapse lisst-unstyled" id="equitiesSubmenu">
            <li><a href="{{url_for('core._simulator')}}" class="dropdown-item text-light pl-4 p-2">Simulator</a></li>
            <li><a href="{{url_for('core.portfolio')}}" class="dropdown-item active text-light pl-4 p-2">Portfolio</a></li>
        </ul>
      </li>       
  </ul>

  <br>
</nav>

<!-- Container for the body page -->
  <section class="my-container">
    <div class="row">
      <div class="col-md-12">
        <div class="bg-light p-3">
<!-- Container for the toggle button and topbar -->
          <div class="container">
            <div class="row">

<!-- Bootstrap Icons -->
              <div class="col">
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

<!-- Sidebar Toggle Button -->
                <button class="btn btn-primary float-start" id="menu-btn">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                  </svg>
                </button>
              </div>
 
            </div>
          </div>

</section>
<!-- JS To Activate Sidebar -->
    <!-- bootstrap js -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <!-- custom js -->
    <script>
        var menu_btn = document.querySelector("#menu-btn")
        var sidebar = document.querySelector("#sidebar")
        var container = document.querySelector(".my-container")
        menu_btn.addEventListener("click", () => {
            sidebar.classList.toggle("active-nav")
            container.classList.toggle("active-cont")
        })

    </script>

{% endblock %}

style.css 部分：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; }

body {
    min-height: 100vh;
    background-color: #fff; }

.navbar {
    width: 250px;
    height: 100vh;
    position: fixed;
    background-color: #212529;
    transition: 0.4s; }

.nav-link {
    font-size: 1.25em; }

.nav-link:active, .nav-link:focus, .nav-link:hover {
    background-color: #c0c2c5; }

.dropdown-menu {
    background-color: #be1ca9; }

.dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
    background-color: #a81219; }

.my-container {
    transition: 0.4s;
    margin-left: 250px; }

/* for navbar */

.sidebar {
    z-index: 0; }

.active-nav {
    margin-left: 0; }

/* for main section */

.active-cont {
    margin-left: 0px;
    z-index: 1; }

.footer p {
    color: rgba(255, 255, 255, 0.5); }

这是在点击切换按钮之前加载的网页。

这是我切换到隐藏侧边栏后的网页。

Answer 1

您将.my-container 向右移动，方法是给它一个margin-left 或250px

当您在.my-container 上切换.active-cont 类时，它会获得margin-left 值0

当您在.sidebar 上切换同一个类时，没有边距移开，所以它只是保持在前面。

你可以通过给.sidebar 一个默认的margin: -200px 或者你的侧边栏的宽度来解决这个问题。这样，当您切换类时，两个元素都会向左移动。

您也可以通过给.active-cont 一个z-index: 1 来解决它。