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类，在内容之间进行调整，但没有任何变化。

我认为这很愚蠢，但是经过3个小时的尝试，斜眼看，搜索和阅读所有内容之后，我仍然迷失了为什么当我在尝试一些更简单的示例时，这种方法不起作用。

谢谢

Answer 1

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

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

Answer 2

我知道一种满足您需求的方法，但是...我不知道这是否是解决该问题的正确方法。在您的<ul>标记中，添加Bootstrap类.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 个答案: