在引导程序中的导航栏中对齐之间的内容

Question

我在这里看到了一个类似的问题，但那个答案对我不起作用。

所以问题是我想在引导程序中证明导航栏中的内容是合理的。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto justify-content-between">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Team</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Status</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Sevices</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contribute</a>
                </li>
            </ul>
        </div>
    </nav>

这是一个活生生的例子：https : //jsfiddle.net/oberknezev/adcybshm/1/

“主页”项目应该一直到左边，“贡献者”应该一直到右边，项目之间的空间是合理的。

尝试使用内联 d-flex 类， justify-content-between 但没有任何变化。

我想这很愚蠢，但是经过 3 个小时的尝试、眯眼、搜索和阅读所有内容后，我仍然不明白为什么在我尝试过的一些更简单的示例上它不起作用。

谢谢

Answer 1

您需要指定导航 flexbox 需要占用父元素的所有可用空间。您可以通过向其添加 flex: 1 来做到这一点，如下所示：

.navbar-nav,
.mr-auto {
flex: 1;
margin: auto !important;
display: flex;
justify-content: space-between;
}