Bootstrap Navbar - 在折叠时保留一些项目答案

【问题标题】：Bootstrap Navbar - Keeping some items while collapsingBootstrap Navbar - 在折叠时保留一些项目
【发布时间】：2019-09-10 07:20:18
【问题描述】：

我希望能够在导航栏中保留一些项目，同时能够在右侧窗口变小时进行折叠切换。

前： LOGO item item item Sign In Sign Up

折叠： LOGO Sign In Sign Up =

发生了什么： LOGO = Sign In Sign Up

<nav class="navbar navbar-expand-xl" style="background-color: black">
      <a href="#" class="navbar-brand"><img src="logo.png" width="300" height="60"></a>
      <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="navbar-nav navbar-nav-left-side collapse navbar-collapse" id="navbarNavAltMarkup">
        <li><a class="nav-item nav-link" href="#">Features</a></li>
        <li><a class="nav-item nav-link" href="#">Pricing</a></li>
        <li><a class="nav-item nav-link" href="#">Pricing</a></li>
        <li><a class="nav-item nav-link" href="#">Pricing</a></li>
        <li><a class="nav-item nav-link" href="#">Pricing</a></li>
        <li><a class="nav-item nav-link" href="#">Pricing</a></li>
      </div>

      <div class="navbar-nav ml-auto navbar-nav-right-side">
        <li><a class="nav-item nav-link" href="#">Log In</a></li>
        <li><a class="nav-item nav-link" href="#">Sign Up</a></li>
      </div>
    </nav>

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

使用响应式排序类作为explained here。

<nav class="navbar navbar-expand-xl" style="background-color: black">
    <a href="#" class="navbar-brand"><img src="//placehold.it/300x60" width="300" height="60"></a>
    <button class="navbar-toggler navbar-dark order-2 order-xl-0" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-nav navbar-nav-left-side collapse navbar-collapse order-3" id="navbarNavAltMarkup">
        <li><a class="nav-item nav-link" href="#">Features</a></li>
        <li><a class="nav-item nav-link" href="#">Pricing</a></li>
        <li><a class="nav-item nav-link" href="#">Pricing</a></li>
        <li><a class="nav-item nav-link" href="#">Pricing</a></li>
        <li><a class="nav-item nav-link" href="#">Pricing</a></li>
        <li><a class="nav-item nav-link" href="#">Pricing</a></li>
    </div>
    <div class="navbar-nav ml-auto navbar-nav-right-side order-xl-0 order-1">
        <li><a class="nav-item nav-link" href="#">Log In</a></li>
        <li><a class="nav-item nav-link" href="#">Sign Up</a></li>
    </div>
</nav>

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

【讨论】：

【解决方案2】：

最好的解决方案是重新排列布局。最后使用navbar-toggler 按钮。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<nav class="navbar navbar-expand-xl" style="background-color: black">
  <a href="#" class="navbar-brand"><img src="logo.png" width="300" height="60"></a>

  <div class="navbar-nav navbar-nav-left-side collapse navbar-collapse" id="navbarNavAltMarkup">
    <li><a class="nav-item nav-link" href="#">Features</a></li>
    <li><a class="nav-item nav-link" href="#">Pricing</a></li>
    <li><a class="nav-item nav-link" href="#">Pricing</a></li>
    <li><a class="nav-item nav-link" href="#">Pricing</a></li>
    <li><a class="nav-item nav-link" href="#">Pricing</a></li>
    <li><a class="nav-item nav-link" href="#">Pricing</a></li>
  </div>

  <div class="navbar-nav ml-auto navbar-nav-right-side">
    <li><a class="nav-item nav-link" href="#">Log In</a></li>
    <li><a class="nav-item nav-link" href="#">Sign Up</a></li>
  </div>
  <button class="navbar-toggler navbar-dark " type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

或者，您可以在navbar-toggler 上仅使用order-last class 来休息它的顺序。它适用于order: -1。通常你需要使用更多的order-* 类，但由于navbar-toggler 不显示在大屏幕上你不需要这样做。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<nav class="navbar navbar-expand-xl" style="background-color: black">
  <a href="#" class="navbar-brand"><img src="logo.png" width="300" height="60"></a>
  <button class="navbar-toggler navbar-dark order-last" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-nav navbar-nav-left-side collapse navbar-collapse" id="navbarNavAltMarkup">
    <li><a class="nav-item nav-link" href="#">Features</a></li>
    <li><a class="nav-item nav-link" href="#">Pricing</a></li>
    <li><a class="nav-item nav-link" href="#">Pricing</a></li>
    <li><a class="nav-item nav-link" href="#">Pricing</a></li>
    <li><a class="nav-item nav-link" href="#">Pricing</a></li>
    <li><a class="nav-item nav-link" href="#">Pricing</a></li>
  </div>

  <div class="navbar-nav ml-auto navbar-nav-right-side">
    <li><a class="nav-item nav-link" href="#">Log In</a></li>
    <li><a class="nav-item nav-link" href="#">Sign Up</a></li>
  </div>
</nav>

【讨论】：