Bootstrap 5导航栏自定义问题：项垂直显示而非水平排列

直接使用Bootstrap 5内置的Flex布局类即可解决问题，无需自定义display: inline-block，具体调整如下：

• 给navbar-nav添加flex-row类，强制导航项水平排列（覆盖移动端默认的垂直布局）
• 可选添加align-items-center让导航项内容垂直居中，gap-3给项之间增加间距

修改后的完整代码片段：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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,GRAD@20..48,100..700,0..1,-50..200" />

<nav class="navbar navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <h4>North</h4>
            </a>
            <!-- 添加flex-row、align-items-center、gap-3类 -->
            <ul class="navbar-nav ms-auto flex-row align-items-center gap-3">
                <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>

原理说明 #

Bootstrap 5的navbar-nav默认是Flex容器，在视口宽度小于768px时，默认布局方向为column（垂直堆叠）。你自定义的display: inline-block会被Flex布局的规则覆盖，因此无法生效。通过添加flex-row类，强制容器使用水平方向的Flex布局，所有nav-item会自动水平排列。

内容的提问来源于stack exchange，提问作者Bubble