使用Bootstrap 5.0 row类无法将导航元素横向排列的问题

你的问题出在没有正确使用Bootstrap的布局类，同时导航栏结构存在冗余和样式冲突。以下是具体修复方案：

核心问题说明 #

• Bootstrap的row类需要搭配col系列类才能实现预期的横向布局，直接在row内放置a标签，无法触发网格系统的横向排列逻辑。
• 你嵌套了多层nav标签，同时使用sticky-top和fixed-top两个定位类，二者会产生样式冲突，导致布局异常。

修复后的代码 #

base.html（保持原有结构即可） #

<body>
    <div class = "container">
        {% block body %}
        {% endblock %}
    </div>
</body>

panel.html（优化导航结构） #

{% block body %}
    <!-- 合并冗余nav标签，用Bootstrap原生flex布局实现横向排列 -->
    <nav class="navbar fixed-top" style="height: 100px; background-color: #2E2E2E;">
        <div class="container-fluid d-flex align-items-center">
            <a id="rbf-main" style="font-size:40px; color: white;" href="{{ url_for ('home') }}">RBF</a>
            <a class="rbf-link text-white ms-3" href="{{ url_for ('home') }}">Remove more Big Files</a>
        </div>
    </nav>
{% endblock %}

关键修改点 #

• 移除嵌套的多余nav标签，合并为单个navbar，避免样式冲突。
• 使用d-flex类直接启用横向flex布局，比row更适配导航栏场景。
• 用align-items-center让导航元素垂直居中，匹配100px的导航栏高度。
• 添加ms-3（左侧间距）给第二个链接设置横向间隔，替代网格系统的默认间距。
• 移除冲突的sticky-top，仅保留fixed-top实现顶部固定效果。

如果偏好使用row实现（适合更复杂的多元素布局），可以这样写：

{% block body %}
    <nav class="navbar fixed-top" style="height: 100px; background-color: #2E2E2E;">
        <div class="container-fluid">
            <div class="row align-items-center h-100">
                <div class="col-auto">
                    <a id="rbf-main" style="font-size:40px; color: white;" href="{{ url_for ('home') }}">RBF</a>
                </div>
                <div class="col-auto ms-3">
                    <a class="rbf-link text-white" href="{{ url_for ('home') }}">Remove more Big Files</a>
                </div>
            </div>
        </div>
    </nav>
{% endblock %}

这里给每个导航元素套上col-auto，让row自动分配横向空间，h-100确保row填满导航栏高度，配合align-items-center实现垂直居中。

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