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

Posted 2023-03-05

【中文标题】在引导程序中的导航栏内对齐内容

【英文标题】：Justify content between - inside nav bar in bootstrap

【发布时间】：2019-01-29 02:45:16

【问题描述】：

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

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

<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 个小时的尝试、眯眼、搜索和阅读所有内容后，我仍然不知道为什么当它在处理我尝试过的一些更简单的示例时它不起作用。

谢谢

【参考方案1】：

我知道一种方法可以满足您的需求，但是...我不知道这是否是解决该问题的正确方法。 在您的<ul> 标记中，添加引导类.w-100。示例如下：

<ul class="nav navbar-nav w-100 justify-content-between">
    <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
    </li>
</ul>

该类与您的<ul> 的宽度为 100% 相同，所以... 如果您使用的是旧的 Bootstrap 版本，您可以为您的 <ul> 指定一个类，例如 .Width，并为该类指定您选择的宽度，如下所示：

.Width

    width: 100%;

【参考方案2】：

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

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