引导程序导航栏折叠在不同的位置

Question

如何解决中等尺寸的导航栏菜单不向下显示的问题？它适用于其他屏幕尺寸。我在这里附上了一张图片。我不知道是什么原因造成的，请帮忙。

[已修复]col md中的md显然对应于其在该特定断点上的列。我以为它只是指示了什么样的断点会导致它崩溃成单独的行！

删除col-md-4并使其成为col-lg-4

<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="brand-column col-md-4">
<div class="navbar-brand">
<span>Plug</span>
</div>
</div>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse col-md-4" id="navbarContent">
<ul class="navbar-nav mx-auto d-flex align-items-center text-nowrap text-center">
<li class="nav-item active mx-1">
<a class="nav-link text-header">Home</a>
</li>
<li class="nav-item mx-1">
<a class="nav-link text-header">Solutions</a>
</li>
<li class="nav-item mx-1">
<a class="nav-link text-header">About Us</a>
</li>
<li class="nav-item mx-1">
<a class="btn btn-success btn-sm px-3 rounded-pill"> Login </a>
</li>
</ul>
</div>
</nav>

Answer 1

之所以会发生这种情况，是因为类.col-md-4在中等屏幕(md(上将.navbar-collapse元素变成了一个大小为4的列。您应该能够通过将该元素的类更改为以下内容来实现所需的效果：

<div class="collapse navbar-collapse col-md-12 col-lg-4" id="navbarContent">