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

首先，作为免责声明，我是一个完全的新手，当谈到引导。我认为制作一个响应菜单很简单，但我遇到了一个问题，我使用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 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>










了解响应式用户界面和引导。你知道为什么吗？我希望我能向专家学习，也许像你这样的专家！你可以在这里快速找到问题的答案。但您需要探索在responsive系统和Bootstrap中如何工作的潜在机制。所以你知道问题是什么，以及建议的答案是如何解决的。祝你好运