html - 对齐内容 - 在 bootstrap 中的导航栏内

Question

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

所以问题是我想在 Bootstrap 中证明导航栏内的内容。

<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/

“Home”元素应该一直放在左边，“contributors”应该一直放在右边，元素之间的空间是对齐的。

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

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

谢谢

Answer 1

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

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