在bootstrap中对齐内容-内部导航栏
在bootstrap中对齐内容-内部导航栏
提问于 2018-08-23 03:11:37
我在这里看到过类似的问题，但这个答案对我不起作用。
所以问题是，我想在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/
“主页”项应该一直放在左边，“贡献者”项应该一直放在右边，两项之间的空格应该对齐。
尝试使用内联d-flex类，justify-content-between，但没有任何变化。
我猜这是很愚蠢的事情，但经过3个小时的尝试，斜视，搜索和阅读所有的东西，我仍然不明白为什么它在我尝试过的一些更简单的例子上不起作用。
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-23 04:03:58
您需要指定nav flexbox需要占用父元素的所有可用空间。您可以通过向其添加flex: 1来完成此操作，如下所示：
.navbar-nav,
.mr-auto {
flex: 1;
margin: auto !important;
display: flex;
justify-content: space-between;
}Stack Overflow用户
发布于 2020-08-28 12:38:51
我知道怎么做你需要的东西，但是...我不知道这是否是解决这个问题的正确方法。在Bootstrap标记中，添加<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%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51973629
复制相关文章
相似问题