为什么这个 Bootstrap 4 Navbar 不能创建等宽的菜单项？

Question

我有一个带有六个导航项和一个内联搜索的 Bootstrap 4 导航栏。

菜单项被压扁在菜单的左侧（水平方向），有很大的空隙，最右边是搜索框。

Here is a codeply 与我正在努力使用的源代码 (HTML/CSS)。 （或完整代码见下文）

不幸的是，虽然有documentation on accomplishing this with navs，但有isn't for navbars。

关于如何解决此问题的任何想法？

<div class="page">
    <div class="lqd-header-menu">
        <nav class="navbar navbar-expand-lg">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle Navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul id="menu-primary-menu" class="navbar-nav mr-auto nav-justified">
                    <li id="menu-item-32" class="nav-item"><a title="New Here" href="https://one.wordpress.test/newhere/" class="nav-item nav-link">New Here</a></li>
                    <li id="menu-item-5150" class="nav-item"><a title="Messages" href="https://one.wordpress.test/messages/" class="nav-item nav-link">Messages</a></li>
                    <li id="menu-item-4858" class="nav-item"><a title="Groups" href="https://one.wordpress.test/groups" class="nav-item nav-link">Groups</a></li>
                    <li id="menu-item-29" class="nav-item"><a title="Serve" href="https://one.wordpress.test/serve" class="nav-item nav-link">Serve</a></li>
                    <li id="menu-item-28" class="nav-item"><a title="Family" href="https://one.wordpress.test/family/" class="nav-item nav-link">Family</a></li>
                    <li id="menu-item-442598" class="nav-item"><a title="Give" href="https://one.wordpress.test/give" class="nav-item nav-link">Give</a></li>
                </ul>
                <form method="get" class="form-inline my-2 my-lg-0" id="search-form" action="https://one.wordpress.test/" role="search">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" name="s" aria-label="Search">
                </form>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div>
</div>

.page {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
    margin: auto;
    max-width: 1280px;
}

.lqd-header-menu {
    margin: 0;
    background-color: #14a7e0;
}

.lqd-header-menu ul li {
    border-left: 1px solid #fff;
    box-sizing: border-box;
    color: #fff;
}

/* Individual Menu Items */
.lqd-header-menu li a {
    color: #fff;
    /* Set Menu Item Links to White */
    display: block;
    font-size: 1rem;
    font-family: 'Avenir Next Cyr W00 Bold', sans-serif;
    text-transform: uppercase;
}

/* Removes Separator Before New Here */
.lqd-header-menu ul li:first-child {
    border: medium none;
}

.lqd-header-menu ul li:last-child {
    border-right: 1px solid #fff;
}

Answer 1

我使用 css flexbox (codeply)

<div class="page">
    <div class="lqd-header-menu">
        <nav class="navbar navbar-expand-lg">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle Navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <a title="New Here" href="https://one.wordpress.test/newhere/" class="nav-item nav-link">New Here</a>
                <a title="Messages" href="https://one.wordpress.test/messages/" class="nav-item nav-link">Messages</a>
                <a title="Groups" href="https://one.wordpress.test/groups" class="nav-item nav-link">Groups</a>
                <a title="Serve" href="https://one.wordpress.test/serve" class="nav-item nav-link">Serve</a>
                <a title="Family" href="https://one.wordpress.test/family/" class="nav-item nav-link">Family</a>
                <a title="Give" href="https://one.wordpress.test/give" class="nav-item nav-link">Give</a>
                <form method="get" class="form-inline my-2 my-lg-0" id="search-form" action="https://one.wordpress.test/" role="search">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" name="s" aria-label="Search">
                </form>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div>
</div>

.collapse.navbar-collapse {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.collapse.navbar-collapse a{
    color: white;
}
.page {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
    margin: auto;
    max-width: 1280px;
}

.lqd-header-menu {
    margin: 0;
    background-color: #14a7e0;
}

.lqd-header-menu ul li {
    border-left: 1px solid #fff;
    box-sizing: border-box;
    color: #fff;
}

/* Individual Menu Items */
.lqd-header-menu li a {
    color: #fff;
    /* Set Menu Item Links to White */
    display: block;
    font-size: 1rem;
    font-family: 'Avenir Next Cyr W00 Bold', sans-serif;
    text-transform: uppercase;
}

/* Removes Separator Before New Here */
.lqd-header-menu ul li:first-child {
    border: medium none;
}

/* Adds Separator After Give */
.lqd-header-menu ul li:last-child {
    border-right: 1px solid #fff;
}