Проблема с настройкой навигационной панели Bootstrap 5: элементы отображаются вертикально, а не горизонтально

Я пытаюсь настроить панель навигации Bootstrap 5 для отображения трех элементов — аватара пользователя, панели уведомлений и значка меню — в горизонтальном расположении. Однако, несмотря на мои усилия, элементы вместо этого располагаются вертикально. Я предоставил фрагмент кода ниже:

    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
    rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
    crossorigin = "anonymous">
    <link rel = "stylesheet" 
    href = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />


<style>
    .nav-item{
        display: inline-block;
    }
</style>


<nav class = "navbar navbar-light bg-light">
        <div class = "container">
            <a class = "navbar-brand" href = "#">
                <h4>North</h4>
            </a>
            <ul class = "navbar-nav ms-auto">
                <li class = "nav-item">
                    <a href = "{% url 'Profile' %}">Avatar</a>
                </li>
                <li class = "nav-item">
                    <a style = "text-decoration: none;" href = "{% url 'Notifications' %}" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasTop" aria-controls = "offcanvasTop">
                        <span class = "material-symbols-outlined">
                            notifications
                        </span>
                    </a>
                    <div class = "offcanvas offcanvas-top" tabindex = "-1" id = "offcanvasTop" aria-labelledby = "offcanvasTopLabel">
                    <div class = "offcanvas-header">
                        <h5 id = "offcanvasTopLabel">Notifications</h5>
                        <button type = "button" class = "btn-close text-reset" data-bs-dismiss = "offcanvas" aria-label = "Close"></button>
                    </div>
                       <div class = "offcanvas-body">
                        <div class = "notification">
                            <a href = "{{ notification.link }}">message</a>
                        </div>
                    </div>
                    </div>
                </li>
                <li class = "nav-item">
                    <a href = "">
                        <span class = "material-symbols-outlined">
                            menu
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

Я пытался убедиться, что класс navbar-nav применяется правильно и что для элементов списка (nav-item) установлено значение display: inline-block, но элементы по-прежнему располагаются вертикально. Как мне добиться желаемого горизонтального выравнивания этих элементов на панели навигации? Любые идеи или предложения будут с благодарностью приняты!

Можете ли вы попробовать добавить свойство flex-row в класс элемента ul, чтобы отображать их горизонтально, вот так: <ul class = "navbar-nav ms-auto flex-row">

— 24.02.2024 22:07

@OnurDoğan Ух ты, это работает. Спасибо. Не могли бы вы объяснить это в части ответа?

— 24.02.2024 22:14

Пожалуйста! Я написал ответ и объяснил его

— 24.02.2024 22:20

css bootstrap-5

24.02.2024 22:01

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добавить flex-row к классу элемента ul, чтобы выровнять их по горизонтали. Он добавляет свойство CSS flex-direction: row к компоненту, и все подэлементы будут выровнены по горизонтали:

    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
    rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
    crossorigin = "anonymous">
    <link rel = "stylesheet" 
    href = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />


<style>
    .nav-item{
        display: inline-block;
    }
</style>


<nav class = "navbar navbar-light bg-light">
        <div class = "container">
            <a class = "navbar-brand" href = "#">
                <h4>North</h4>
            </a>
            <ul class = "navbar-nav ms-auto flex-row">
                <li class = "nav-item">
                    <a href = "{% url 'Profile' %}">Avatar</a>
                </li>
                <li class = "nav-item">
                    <a style = "text-decoration: none;" href = "{% url 'Notifications' %}" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasTop" aria-controls = "offcanvasTop">
                        <span class = "material-symbols-outlined">
                            notifications
                        </span>
                    </a>
                    <div class = "offcanvas offcanvas-top" tabindex = "-1" id = "offcanvasTop" aria-labelledby = "offcanvasTopLabel">
                    <div class = "offcanvas-header">
                        <h5 id = "offcanvasTopLabel">Notifications</h5>
                        <button type = "button" class = "btn-close text-reset" data-bs-dismiss = "offcanvas" aria-label = "Close"></button>
                    </div>
                       <div class = "offcanvas-body">
                        <div class = "notification">
                            <a href = "{{ notification.link }}">message</a>
                        </div>
                    </div>
                    </div>
                </li>
                <li class = "nav-item">
                    <a href = "">
                        <span class = "material-symbols-outlined">
                            menu
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

Надеюсь, понятно и полезно

24.02.2024 22:19