如何制作一个在电脑和移动设备上都响应的固定侧边栏菜单？

Question

我正在使用 Bootstrap 5 制作简历网页。我现在似乎已经得到了我想要的东西，但我不知道如何在调整页面大小（较小）时使侧边栏固定而不覆盖其他内容的显示。

我尝试使用flex，但当页面较小时，它只会将右侧和左侧的内容分成两部分。当页面较小时，右侧的内容应该位于菜单下方。

代码片段

<!--Left Side-->
<div class="row">
  <div class="container-lg col-lg-3 p-3 mb-2 bg-secondary-subtle text-emphasis-secondary">

    <!--Sidebar Menu-->
    <div class="container-fluid p-1 mb-2 bg-secondary text-white text-center">
      <p>ABOUT ME</p>
    </div>
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link text-body" href="#Personal Info">Personal Info</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-body" href="#Work Experience">Experience</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-body" href="#Skill">Skill</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-body" href="#Education">Education</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-body" href="#Contact">Contact</a>
      </li>
    </ul>
  </div>
  <!--Right side-->
  <div class="d-flex flex-column bd-highlight mb-3 container-lg col-lg sticky-lg-top">
    <!--right side content-->
  </div>
</div>


<!-- Bootstrap 5.3.2 -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/boo[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Answer 1

如果您需要，请按照以下说明操作：

1-使用bootstrap的网格：将页面分为两部分。对于侧边栏，使用 col-lg-3，对于主要部分，使用 col-lg-9。这意味着在较大的屏幕上，侧边栏占据屏幕的 1/4，而主要内容占据其余部分。

2-固定侧边栏：使用css来固定位置。但请确保它不与您的主要内容重叠。

3- 响应式：使用 Bootstrap 的类，如适用于大屏幕的 flex-lg-row 和适用于较小屏幕的 flex-column。

<div class="d-flex flex-column flex-lg-row">
    <!-- Sidebar -->
    <div class="col-lg-3 p-3 bg-secondary position-fixed">
        <!-- Sidebar items -->
    </div>

    <!-- Main Content -->
    <div class="col-lg-9 offset-lg-3">
        <!-- Main content elements -->
    </div>
</div>

CSS 部分会是这样的：

@media (min-width: 992px) {
    .position-fixed {
        top: 0;
        left: 0;
        width: 25%;
    }

    .offset-lg-3 {
        margin-left: 25%;
    }
}