如何实现折叠式Navbar中链接居中、搜索框居右布局？

直接使用Bootstrap内置的flex工具类即可实现需求，无需使用绝对定位（会导致元素脱离文档流超出容器），修改后的完整代码如下：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark p-0 b-0 m-0">
    <div class="container">
        <a class="navbar-brand mb-0 h1" href="#">
            <img class="d-inline-block align-top" src="" alt="Site Logo" height="26">
        </a>

        <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle Navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarNav" class="navbar-collapse collapse show d-flex w-100 align-items-center">
            <ul class="nav nav-pills p-0 b-0 m-0 mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">VIDEOS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">CATEGORIES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">ACTORS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">LOG IN</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">SIGN UP</a>
                </li>
            </ul>

            <form class="form-outline">
                <div class="input-group">
                    <input class="form-control bg-secondary border-0 shadow-none pt-1 mt-1 pb-1 mb-1" type="text" placeholder="Search" style="color: white;">
                    <button type="button" class="btn btn-secondary pt-1 mt-1 pb-1 mb-1">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</nav>

关键修改说明 #

• 将#navbarNav转为flex容器并占满宽度：添加d-flex w-100 align-items-center，确保内部元素垂直居中且不超出Navbar范围
• 移除导航列表的nav-fill类：该类会强制导航项占满父容器宽度，导致无法实现居中效果
• 给导航列表添加mx-auto：利用Bootstrap的自动margin类，让导航列表自动水平居中，搜索框会自然靠右对齐
• 移除表单的justify-content-end：无需额外设置，导航列表的mx-auto已实现搜索框靠右的效果

此方案完全基于Bootstrap原生类，保留了折叠Navbar的响应式功能，所有元素均会被约束在Navbar容器内。

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