如何解决点击toggle按钮时navbar-brand下移的响应式布局问题

开发者阿泽

2026-8-22

解决导航栏响应式模式下品牌下移的问题

问题出在哪

你这段代码里，navbar-brand 放在了折叠菜单容器的后面，移动端点击切换按钮展开菜单时，折叠容器会占满垂直空间，直接把品牌挤到下面去了。另外Bootstrap的navbar默认是flex布局，元素顺序不对也会影响对齐效果。

修复方案1：调整元素顺序（最省心）

把 navbar-brand 挪到 navbar-toggler 按钮前面，这样移动端里它会和切换按钮在同一行，展开菜单也不会被挤下去：

<header class="header">
    <nav class="navbar fixed-top navbar-expand-sm bg-warning">
        <div class="container">
            <a class="navbar-brand" href="#">My Project</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#about">About</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

修复方案2：用CSS强制对齐

要是不想改元素顺序，就给容器加flex对齐属性，确保品牌始终在右侧不被挤压：

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

/* 移动端确保切换按钮和品牌在同一行 */
@media (max-width: 575.98px) {
    .navbar-brand {
        flex-grow: 0;
        margin-right: auto;
    }
}