Bootstrap 4 - 崩溃外的Navbar物品

好的，我不得不承认，这是我一直努力的工作，即使在BS3中也能正常工作。但我希望在保持持久性的折叠容器外部有导航条链接。Bootstrap 4 - 崩溃外的Navbar物品

这就是我现在所拥有的：

<nav class="navbar fixed-top navbar-expand-lg navbar-template"> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" 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> 
    <ul class="navbar-nav"> 
     <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-facebook"></span></a></li> 
     <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-twitter"></span></a></li> 
     <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-youtube"></span></a></li> 
     <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-linkedin"></span></a></li> 
    </ul> 
</nav>

这工作，直到第一个NAV处于收缩状态。当崩溃有效时，它看起来是这样的：

有没有人发现这个一个干净的解决方案？

来源

2017-09-10 Sandra Willford

你要崩溃的外面是什么项目？ –

第二个导航组...即：社交媒体链接 –

移动设备中的预期对齐方式是什么？ – ZimSystem

最简单的方法是使用flexbox实用程序类，因此不需要额外的CSS。保留你始终想要展示的项目，其中包括navbar-collapse div。

https://www.codeply.com/go/TWZGiy3VGw

<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>

来源

2017-09-10 14:31:13 ZimSystem

谢谢，这正是我正在寻找。我想我需要阅读关于BS4的新实用程序类:) –

Bootstrap 4 - 崩溃外的Navbar物品

回答

相关问题