我在这里看到过类似的问题,但这个答案对我不起作用。
所以问题是,我想在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个小时的尝试,斜视,搜索和阅读所有的东西,我仍然不明白为什么它在我尝试过的一些更简单的例子上不起作用。
谢谢
发布于 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;
}
发布于 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%;
}
https://stackoverflow.com/questions/51973629
复制相似问题