Bootstrap移动端Logo与汉堡菜单并排显示问题求助

直接给你两个关键修改点，亲测有效：

1. 缩小Logo尺寸并控制布局 #

给Logo图片加自定义类，直接限制最大宽度（按你需求缩小10%以上），同时保持宽高比：

<a href="/" class="navbar-brand text-light d-flex align-items-center">
    <img
        src="/static/hopps-hunter_logo.png"
        alt="Hopps Hunter"
        class="img-responsive logo-small"
    />
</a>

添加对应CSS样式：

.logo-small {
    max-width: 80%; /* 比原尺寸小20%，可根据实际视觉效果调整 */
    height: auto; /* 避免Logo变形 */
}

2. 强制导航栏元素在移动端不换行 #

修改navbar的类，替换原有的justify-content-between，确保Logo和汉堡按钮始终在同一行：

<nav
    class="navbar navbar-expand-lg navbar-dark bg-dark d-flex align-items-center flex-nowrap"
>

修改后的完整代码片段 #

<nav
    class="navbar navbar-expand-lg navbar-dark bg-dark d-flex align-items-center flex-nowrap"
>
    <a href="/" class="navbar-brand text-light d-flex align-items-center">
        <img
            src="/static/hopps-hunter_logo.png"
            alt="Hopps Hunter"
            class="img-responsive logo-small"
        />
    </a>

    <button
        class="navbar-toggler ml-auto"
        type="button"
        data-toggle="collapse"
        data-target="#navbarToggler"
        aria-controls="navbarToggler"
        aria-expanded="false"
        aria-label="Toggle navigation"
    >
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarToggler">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            {% if not g.user %}
            <li class="nav-item">
                <a
                    class="nav-link pr-3 text-light"
                    href="/user/login"
                    >Login</a
                >
            </li>
            <li class="nav-item">
                <a class="nav-link text-light" href="/user/signup"
                    >Sign Up</a
                >
            </li>
            {% endif %}
        </ul>
    </div>
</nav>

关键说明 #

• flex-nowrap 强制导航栏内元素不换行，确保小屏幕下Logo和汉堡按钮始终并排
• ml-auto 给汉堡按钮添加左自动边距，让它靠右侧对齐，和Logo形成左右分布
• d-flex align-items-center 保证Logo和汉堡按钮垂直居中对齐，视觉更协调

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