调整bootstrap4

Question

我对bootstrap是一个新手4.我快速了解如何在调整窗口大小后控制boostrap4中导航栏项的位置。

我想保持购物车和登录的位置与调整大小前相同。 另外，如果srceen被调整大小，我想将搜索栏更改为下拉列表，当按下该下拉列表时，我希望搜索栏在整个屏幕上都是这样的

Answer 1

要将最后的项目保留在右端，您需要将它们分成新的.navbar-nav元素：

   <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#">Login</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Cart</a></li>
  </ul>

然后你需要将mr-auto类应用于前一个元素，使其向右推。这是一个模板，可以满足您的需求：

<nav class="navbar navbar-expand-sm">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar"
    aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
  <div class="collapse navbar-collapse" id="mainNavbar">
    <form class="form-inline my-2 my-lg-0 mr-auto">
      <input class="form-control mr-sm-2" type="search" placeholder="First name" aria-label="Search">
      <button class="btn btn-dark my-2 my-sm-0" type="submit">Dark</button>
    </form>
  </div>

  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#">Login</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Cart</a></li>
  </ul>
</nav>

这是它的样子：

这将在您需要时响应并崩溃。