Боковая панель прилипает к верхней части страницы, а не к верхней части экрана
Я новичок в веб-разработке и в настоящее время разрабатываю веб-сайт-портфолио на основе django и начальной загрузки 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 На других сайтах были запутанные ответы.
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
53
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Я удалил sticky-top из container-fluid. Я также удалил flex-nowrap из row. Я добавил следующее в sidebar, чтобы fixed и scrollable отображались на экране любого размера: position-fixedtop-0bottom-0start-0overflow-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>
Другие вопросы по теме
Внешний вид объекта SVG в мобильном представлении отличается от просмотра на рабочем столе
Функция угловой прокрутки не работает для последнего раздела страницы
Несогласованность данных
Как предотвратить затемненное перекрытие текста с уменьшенным интервалом между буквами в html/css
Анимация индикатора выполнения в виде пунктирной линии
Как мне воспроизвести точную анимацию, сделанную в разделе героев flecto.io?
Почему, когда я отправляю запрос на исправление в Open Weather API в React JS. React сначала вернет мне неопределенное значение, а после этого данные?
Получение JSON нарушает работу веб-сайта и не отображает контент должным образом
Получение ответа от PrimeVue FileUpload после загрузки файла
Угловая кнопка исчезает на прокручиваемых страницах
Похожие вопросы
Как сделать так, чтобы панель поиска располагалась вертикально?
Как заставить расположенные рядом элементы div в гибком контейнере обертывать свое содержимое перед тем, как обернуть себя
Разделите заголовки знаком «-» в Wordpress
Как раскрасить столбец таблицы определенным классом в заголовке с помощью CSS?
Исправлен заголовок, содержащий изображение и гамбургер-меню с прокручиваемым содержимым
Проблема с пониманием проблемы выравнивания при использовании display inline-flex
Преобразование таблицы HTML в flexbox – как имитировать td с помощью rowspan="2"
Есть ли способ добавить белую рамку внутри этого div?
Элементы формы не работают с div, перекрывающим модальное окно начальной загрузки
Как отобразить подробное описание продукта WooCommerce в заголовке?