为什么此引导 4 导航栏不会创建等宽菜单项？

Question

我有一个Bootstrap 4导航栏，里面有六个导航项目和一个内联搜索。

菜单项被挤压在菜单的左侧(水平(，有一大块空白，最右边是搜索框。

这里有一个代码层，里面有我很难处理的源代码(HTML/CSS(。(完整代码见下文(

不幸的是，虽然有关于用导航实现这一点的文档，但没有导航栏。

关于我该怎么解决这个问题，有什么想法吗？

<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;
}