Bootstrap 4：将导航栏项目定位在折叠部分之外
导航 Bootstrap 4 的导航栏可能很棘手，尤其是在维护某些元素时在可折叠部分之外。许多开发人员都在努力确保特定项目无论折叠状态如何都保持持久性。
要解决这个问题，最简单的方法是利用 Flexbox 实用程序类。这消除了对额外 CSS 的需要，并干净地将所需的项目保留在 navbar-collapse div 之外。
下面是所提供代码片段的改进版本：
<code class="html"><nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">
<a class="navbar-brand" href="#">Navbar</a>
<div class="d-flex flex-row order-2 order-lg-3">
<ul class="navbar-nav flex-row">
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-facebook"></span></a></li>
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-twitter"></span></a></li>
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-youtube"></span></a></li>
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-linkedin"></span></a></li>
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu dropdown-menu-right">
<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>
</ul>
</div>
</nav></code>在此改进版本中，您可以清楚地观察到以下变化：
有效地利用这些类可确保折叠之外的项目保持可见，而到达断点时可折叠部分优先。
以上是如何将 Bootstrap 4 导航栏项目放置在折叠部分之外？的详细内容。更多信息请关注PHP中文网其他相关文章！
