Bootstrap 5 粘性侧边栏

问题描述 投票：0回答：1

我是 Web 开发新手，目前正在开发一个基于 django 和 bootstrap 5.3.3 的投资组合网站，我的侧边栏粘在页面顶部而不是用户屏幕顶部有问题（我需要无论用户位于页面上的哪个位置，它都对用户可见）。我尝试过使用引导类

sticky-top
，但它似乎没有对其行为做出任何改变。 这是我的代码：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Portfolio</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  </head>
  <body>
    <div class="container-fluid sticky-top" style="background-color: rgb(255, 255, 255);"> <!--rgb(52, 52, 52)-->
      <div class="row flex-nowrap">
        <!-- Start Navbar -->
          <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
              <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
                  <div class="dropdown pb-4">
                    <a href="#" class="d-flex align-items-center text-white text-decoration-none " id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle">
                        {% if user.is_authenticated %}
                        <span class="d-none d-sm-inline mx-1">{{user.username}}</span>
                        {% else %}
                        <span class="d-none d-sm-inline mx-1">Aleksandr Gruzdev</span>
                        {% endif %}
                    </a>
                    <!-- <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
                        <li><a class="dropdown-item" href="#">New project...</a></li>
                        <li><a class="dropdown-item" href="#">Settings</a></li>
                        <li><a class="dropdown-item" href="#">Profile</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Sign out</a></li>
                    </ul> -->
                </div>
                  <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
                      <li class="nav-item">
                          <a href="/" class="nav-link align-middle px-0">
                            <span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-house"></i>  Home</span>
                          </a>
                      </li>
                      <li>
                          <a href="/#about" class="nav-link px-0 align-middle mt-1">
                              <span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-person"></i> About</span></a>
                      </li>
                      <li>
                        <a href="#" class="nav-link px-0 align-middle mt-1">
                            <span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-images"></i> Resume</span></a>
                      </li>
                      <li>
                        <a href="#" class="nav-link px-0 align-middle mt-1">
                            <span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-hdd-stack"></i> Services</span></a>
                      </li>
                      <li>  
                        <a href="#projects" data-bs-toggle="collapse" class="nav-link px-0 align-middle dropdown-toggle mt-1" style="color: rgb(20, 157, 221);">
                            <span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-card-list"></i> Projects</span> </a>
                            <ul class="collapse nav flex-column ms-1" id="projects" data-bs-parent="#menu">
                            <li class="w-100">
                                <a href="blogpost" class="nav-link px-0" style="color: rgb(20, 157, 221);"> <span class="d-none d-sm-inline">Blog Post</span> </a>
                            </li>
                            <li>
                                <a href="/lekschat" class="nav-link px-0" style="color: rgb(20, 157, 221);"> <span class="d-none d-sm-inline">LeksChat™</span> </a>
                            </li>
                            <li>  
                              <a href="#game" data-bs-toggle="collapse" class="nav-link px-10 align-right dropdown-toggle" style="color: rgb(20, 157, 221);">
                                  <span class="ms-1 d-none d-sm-inline"><i class="bi bi-card-list"></i> Space Runner Game</span> </a>
                                  <ul class="collapse nav flex-column ms-1" id="game" data-bs-parent="#projects">
                                  <li>
                                      <a href="#" class="nav-link px-0" style="color: rgb(20, 157, 221);"> <span class="d-none d-sm-inline">Game</span> </a>
                                  </li>
                                  <li class="w-100">
                                      <a href="#" class="nav-link px-0" style="color: rgb(20, 157, 221);"> <span class="d-none d-sm-inline">Leaderboard</span> </a>
                                  </li>
                                  <li>
                                      <a href="#" class="nav-link px-0" style="color: rgb(20, 157, 221);"> <span class="d-none d-sm-inline">Personal Best</span> </a>
                                  </li>
                              </ul>
                            </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" class="nav-link px-0 align-middle mt-1">
                            <span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-envelope"></i> Contact</span></a>
                      </li>
                      <li>
                        {% if user.is_authenticated %}
                        <a href="logout" class="nav-link px-0 align-middle mt-1">
                            <span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-door-closed"></i> Log out</span></a>
                            {% if user.is_superuser %}
                              <a href="http://127.0.0.1:8000/admin/" target="_blank" rel="noopener noreferrer" class="nav-link px-0 align-middle mt-1"><span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-door-closed"></i> Admin Panel</span></a>
                            {% endif %}
                        {% else %}
                        <a href="register" class="nav-link px-0 align-middle mt-1">
                            <span class="ms-1 d-none d-sm-inline" style="font-size: x-large; color: rgb(20, 157, 221);"><i class="bi bi-box-arrow-in-right"></i> Login or Signup</span></a>
                        {% endif %} 
                      </li>
                  </ul>
                  <hr>
              </div>
          </div>
            <!-- End navbar -->
            <div class="col py-3">
              <main class="main">
                {% block content %}
                {% endblock %}
              </main>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

我发现这个问题过去已经被问过，但解决方案对我以及提出问题的人都不起作用： 如何在 Bootstrap 5.2 中设置侧边栏“粘性” ChatGPT 也没有帮助。 其他网站的答案令人困惑。

html frontend bootstrap-5
1个回答
0
投票

我已从 

sticky-top
中删除了 
container-fluid
。我还从 
flex-nowrap
中删除了 
row
。我在 
sidebar
中添加了以下内容，使其在任何屏幕尺寸下都为 
fixed
和 
scrollable
： 
position-fixed
top-0
bottom-0
start-0
overflow-auto
。

我在主体容器中添加了

ms-auto
。我还更新了不同屏幕尺寸下的 
col
宽度，但您当前的 
code
不适合移动视图。因此，请也调整您的侧边栏以适应移动视图。

我已经解决了您当前的问题。请查看以下

code
：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Portfolio</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
    />
  </head>
  <body>
    <div class="container-fluid" style="background-color: rgb(255, 255, 255)">
      <!--rgb(52, 52, 52)-->
      <div class="row">
        <!-- Start Navbar -->
        <div class="col-sm-4 col-md-3 col-xl-2 px-sm-2 px-0 bg-dark position-fixed top-0 bottom-0 start-0 overflow-auto">
          <div
            class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100"
          >
            <div class="dropdown pb-4">
              <a
                href="#"
                class="d-flex align-items-center text-white text-decoration-none"
                id="dropdownUser1"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <img
                  src="https://github.com/mdo.png"
                  alt="hugenerd"
                  width="30"
                  height="30"
                  class="rounded-circle"
                />
                {% if user.is_authenticated %}
                <span class="d-none d-sm-inline mx-1">{{user.username}}</span>
                {% else %}
                <span class="d-none d-sm-inline mx-1">Aleksandr Gruzdev</span>
                {% endif %}
              </a>
              <!-- <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
                        <li><a class="dropdown-item" href="#">New project...</a></li>
                        <li><a class="dropdown-item" href="#">Settings</a></li>
                        <li><a class="dropdown-item" href="#">Profile</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Sign out</a></li>
                    </ul> -->
            </div>
            <ul
              class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start"
              id="menu"
            >
              <li class="nav-item">
                <a href="/" class="nav-link align-middle px-0">
                  <span
                    class="ms-1 d-none d-sm-inline"
                    style="font-size: x-large; color: rgb(20, 157, 221)"
                    ><i class="bi bi-house"></i> Home</span
                  >
                </a>
              </li>
              <li>
                <a href="/#about" class="nav-link px-0 align-middle mt-1">
                  <span
                    class="ms-1 d-none d-sm-inline"
                    style="font-size: x-large; color: rgb(20, 157, 221)"
                    ><i class="bi bi-person"></i> About</span
                  ></a
                >
              </li>
              <li>
                <a href="#" class="nav-link px-0 align-middle mt-1">
                  <span
                    class="ms-1 d-none d-sm-inline"
                    style="font-size: x-large; color: rgb(20, 157, 221)"
                    ><i class="bi bi-images"></i> Resume</span
                  ></a
                >
              </li>
              <li>
                <a href="#" class="nav-link px-0 align-middle mt-1">
                  <span
                    class="ms-1 d-none d-sm-inline"
                    style="font-size: x-large; color: rgb(20, 157, 221)"
                    ><i class="bi bi-hdd-stack"></i> Services</span
                  ></a
                >
              </li>
              <li>
                <a
                  href="#projects"
                  data-bs-toggle="collapse"
                  class="nav-link px-0 align-middle dropdown-toggle mt-1"
                  style="color: rgb(20, 157, 221)"
                >
                  <span
                    class="ms-1 d-none d-sm-inline"
                    style="font-size: x-large; color: rgb(20, 157, 221)"
                    ><i class="bi bi-card-list"></i> Projects</span
                  >
                </a>
                <ul
                  class="collapse nav flex-column ms-1"
                  id="projects"
                  data-bs-parent="#menu"
                >
                  <li class="w-100">
                    <a
                      href="blogpost"
                      class="nav-link px-0"
                      style="color: rgb(20, 157, 221)"
                    >
                      <span class="d-none d-sm-inline">Blog Post</span>
                    </a>
                  </li>
                  <li>
                    <a
                      href="/lekschat"
                      class="nav-link px-0"
                      style="color: rgb(20, 157, 221)"
                    >
                      <span class="d-none d-sm-inline">LeksChat™</span>
                    </a>
                  </li>
                  <li>
                    <a
                      href="#game"
                      data-bs-toggle="collapse"
                      class="nav-link px-10 align-right dropdown-toggle"
                      style="color: rgb(20, 157, 221)"
                    >
                      <span class="ms-1 d-none d-sm-inline"
                        ><i class="bi bi-card-list"></i> Space Runner Game</span
                      >
                    </a>
                    <ul
                      class="collapse nav flex-column ms-1"
                      id="game"
                      data-bs-parent="#projects"
                    >
                      <li>
                        <a
                          href="#"
                          class="nav-link px-0"
                          style="color: rgb(20, 157, 221)"
                        >
                          <span class="d-none d-sm-inline">Game</span>
                        </a>
                      </li>
                      <li class="w-100">
                        <a
                          href="#"
                          class="nav-link px-0"
                          style="color: rgb(20, 157, 221)"
                        >
                          <span class="d-none d-sm-inline">Leaderboard</span>
                        </a>
                      </li>
                      <li>
                        <a
                          href="#"
                          class="nav-link px-0"
                          style="color: rgb(20, 157, 221)"
                        >
                          <span class="d-none d-sm-inline">Personal Best</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#" class="nav-link px-0 align-middle mt-1">
                  <span
                    class="ms-1 d-none d-sm-inline"
                    style="font-size: x-large; color: rgb(20, 157, 221)"
                    ><i class="bi bi-envelope"></i> Contact</span
                  ></a
                >
              </li>
              <li>
                {% if user.is_authenticated %}
                <a href="logout" class="nav-link px-0 align-middle mt-1">
                  <span
                    class="ms-1 d-none d-sm-inline"
                    style="font-size: x-large; color: rgb(20, 157, 221)"
                    ><i class="bi bi-door-closed"></i> Log out</span
                  ></a
                >
                {% if user.is_superuser %}
                <a
                  href="http://127.0.0.1:8000/admin/"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="nav-link px-0 align-middle mt-1"
                  ><span
                    class="ms-1 d-none d-sm-inline"
                    style="font-size: x-large; color: rgb(20, 157, 221)"
                    ><i class="bi bi-door-closed"></i> Admin Panel</span
                  ></a
                >
                {% endif %} {% else %}
                <a href="register" class="nav-link px-0 align-middle mt-1">
                  <span
                    class="ms-1 d-none d-sm-inline"
                    style="font-size: x-large; color: rgb(20, 157, 221)"
                    ><i class="bi bi-box-arrow-in-right"></i> Login or
                    Signup</span
                  ></a
                >
                {% endif %}
              </li>
            </ul>
            <hr />
          </div>
        </div>
        <!-- End navbar -->
        <div class="col-sm-8 col-md-9 col-xl-10 py-3 ms-auto">
          <main class="main">{% block content %} {% endblock %}</main>
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.