我一直在制作一个固定的导航栏,需要在所有设备上都有一个可见的导航栏切换器(我删除了 navbar-toggleable-md 类来实现这一点)。它需要位于左侧,前面有导航栏品牌,而另一组链接(切换器之外)需要位于右侧。
像这样:
问题是,无论我做什么,这些正确的链接都不会保持内联,并且我的导航栏会变成两行。
这是我一直在使用的代码的基本轮廓。我做错了什么?
<nav class="navbar navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-left ml-5" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="float-right">
<a>Link</a>
</div>
</nav>
谁来帮忙啊!谢谢!
最佳答案
将导航栏更改为flex-row
。默认情况下,它的方向:列将使导航栏元素垂直堆叠成两行,就像您所看到的那样。
此外,将额外的链接放在品牌后面,然后使用 ml-auto
将其推到右侧...
<nav class="navbar navbar-inverse fixed-top bg-inverse flex-row flex-wrap">
<button class="navbar-toggler navbar-toggler-left ml-5" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<div class="collapse navbar-collapse w-100" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
关于css - Bootstrap 4 导航栏切换器带有单独的导航栏链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43431933/