Question

首先，作为免责声明，关于Bootstrap，我是一个完全的新手。我以为制作响应式菜单会很简单，但是我遇到了一个问题，其中我使用引导程序4创建了响应式导航栏，如下所示：

调整大小后，现在显示如下：

但是当我单击下拉菜单时，它显示如下：

我希望按钮保持在右侧的位置，而不是被拉入菜单。真的很困惑为什么会这样。的代码是：

<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">

  <a class="navbar-brand" href="#">Brand</a>

  <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
                <span class="navbar-toggler-icon"></span>
            </button>

  <div class="collapse navbar-collapse ml-auto justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
    </ul>
  </div>
  <a class="btn btn-outline-info" href="#">Button</a>

</nav>

感谢您的帮助！

Answer 1

使用自适应order-*类使navbar-collapse停留在较小的屏幕上。

<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse ml-auto justify-content-end order-last order-lg-0" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
        </ul>
    </div>
    <a class="btn btn-outline-info" href="#">Button</a>
</nav>

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

Bootstrap NavBar with left, center or right aligned items

响应式导航栏将链接拉入下拉菜单

1 个答案: