Bootstrap导航栏Inline Form无法保持inline布局问题求助

原代码 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="/">
        <img width="40" height="40" src="https://static-cdn.jtvnw.net/emoticons/v1/1904/3.0">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
            <li class="nav-item  <% if (pageName === " home") { %> active <% } %>">
                    <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item  <% if (pageName === " profile") { %> active <% } %>">
                    <a class="nav-link" href="/profile">Profile</a>
            </li>
            <li class="nav-item  <% if (pageName === " postnow") { %> active <% } %>">
                    <a class="nav-link" href="/postnow">Post Now</a>
            </li>

        </ul>

        <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        <ul class="navbar-nav ml-auto">
            <li class="navbar-nav">
                <button class="btn btn-sm btn-outline-success" type="button" onclick="window.location='/logout'">Log
                    Out</button>
            </li>
        </ul>
    </div>
</nav>

问题现象 #

运行上述代码后，导航栏中的搜索表单无法保持内联布局，输入框和按钮呈现垂直排列状态。

问题原因 #

你使用的是Bootstrap 5版本，但代码中沿用了Bootstrap 4的废弃类名，导致布局失效：

• form-inline：Bootstrap 5已移除该类，需用flex布局类替代
• mr-auto/ml-auto：Bootstrap 5改用me-auto（margin-end）和ms-auto（margin-start）替代
• 折叠按钮的data-toggle/data-target：Bootstrap 5中需改为data-bs-toggle/data-bs-target，否则折叠功能无法正常工作

修复后的代码 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="/">
        <img width="40" height="40" src="https://static-cdn.jtvnw.net/emoticons/v1/1904/3.0">
    </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 me-auto">
            <li class="nav-item <% if (pageName === " home") { %> active <% } %>">
                <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item <% if (pageName === " profile") { %> active <% } %>">
                <a class="nav-link" href="/profile">Profile</a>
            </li>
            <li class="nav-item <% if (pageName === " postnow") { %> active <% } %>">
                <a class="nav-link" href="/postnow">Post Now</a>
            </li>
        </ul>

        <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
        <ul class="navbar-nav ms-auto ms-3">
            <li class="nav-item">
                <button class="btn btn-sm btn-outline-success" type="button" onclick="window.location='/logout'">
                    Log Out
                </button>
            </li>
        </ul>
    </div>
</nav>

关键修改点 #

1. 将form-inline替换为d-flex，通过flex布局实现表单内联排列
2. 把mr-auto改为me-auto，ml-auto改为ms-auto，适配Bootstrap 5的间距类规范
3. 更新折叠按钮属性为data-bs-toggle和data-bs-target，确保折叠功能正常
4. 将mr-sm-2改为me-2，移除冗余的my-2 my-sm-0类
5. 给右侧退出按钮列表添加ms-3，增加与表单的间距，优化视觉布局

修改后，表单的输入框和按钮会保持内联布局，与导航栏其他元素正常对齐。

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