从 Offcanvas 中排除搜索框时导航栏不对齐

Question

我正在为我的导航栏使用 Bootstrap 5.3 alpha2 示例。我希望搜索框显示在移动视图中，所以我将其从“collapse navbar-collapse d-lg-flex”类中排除。

但是现在，我的 Navbar 不再对齐中心了。

<a class="close-navbar-toggler collapsed" data-bs-toggle="collapse" data-bs-target="#navbarsExample11"
        aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
    </a>
    <nav class="navbar navbar-expand-lg bg-body-tertiary rounded fixed-top" aria-label="Thirteenth navbar example">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11"
                aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse d-lg-flex" id="navbarsExample11">
                <a class="navbar-brand col-lg-3 me-0 justify-content-lg-start" href="#">
                    <img src="/bib/img/Logo-fill-no-background.png" alt="Logo" width="27" height="27" />
                    Text123
                </a>
                <ul class="navbar-nav col-lg-6 justify-content-lg-end">
                    <li class="nav-item">
                        <a class="nav-link" href="main.php">
                            <i class="bi bi-house-door-fill mx-1"></i>
                            Home
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle active" href="#" id="dropdown08" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            <i class="bi bi-book-fill mx-1"></i>
                            Text123
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="dropdown08">
                            <li><a class="<?php if ($username == 'guest') {
                                echo 'dropdown-item disabled';
                            } else {
                                echo 'dropdown-item active';
                            } ?>" href="#" disabled><i class="bi bi-plus-lg mx-1"></i>add</a></li>
                            <li><a class="<?php if ($username == 'no.guest') {
                                echo 'dropdown-item';
                            } else {
                                echo 'dropdown-item disabled';
                            } ?>" href="update.php" disabled><i class="bi bi-pencil-square mx-1"></i>edit</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            <i class="bi bi-person-fill mx-1"></i>
                            <?php echo $username; ?>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="dropdown08">
                            <li><a class="<?php if ($username == 'guest') {
                                echo 'dropdown-item disabled';
                            } else {
                                echo 'dropdown-item';
                            } ?>" href="#">added</a></li>
                            <li><a class="<?php if ($username == 'guest') {
                                echo 'dropdown-item disabled';
                            } else {
                                echo 'dropdown-item';
                            } ?>" href="#">edited</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/bib/logout.php">
                            <i class="bi bi-door-closed-fill mx-1"></i>
                            Logout
                        </a>
                    </li>
                </ul>
            </div>
            <div class="d-lg-flex col-lg-3 justify-content-lg-end">
                <div class="dataTables_filter" id="example_filter">
                    <label>
                        <input class="form-control" type="search" placeholder="searching" aria-controls="example"
                            id="search">
                    </label>
                </div>
            </div>
        </div>
    </nav>

我需要不同的网格类吗？我似乎找不到修复它的方法。

我尝试了简单的类“行”和“列”，但它没有按照我想要的方式对齐导航项。它仍然可以正常工作，如果我添加

            <div class="d-lg-flex col-lg-3 justify-content-lg-end">
                <div class="dataTables_filter" id="example_filter">
                    <label>
                        <input class="form-control" type="search" placeholder="searching" aria-controls="example"
                            id="search">
                    </label>
                </div>
            </div>

回到里面

<div class="collapse navbar-collapse d-lg-flex" id="navbarsExample11">
...
</div>

编辑： 我使用了https://getbootstrap.com/docs/5.3/examples/navbars/

的第11个例子