从折叠中排除导航栏内的项目

Question

所以我有一个带有左右两个项目的Bootstrap 4导航栏。这是看起来像。

这就是倒塌时的样子。

所以我想要的是注册按钮位于与折叠切换按钮对齐的右侧。我该怎么办？是否可能？

这是我的代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <button class="navbar-toggler ml-lg-5 ml-md-5 ml-sm-5" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
            <ul class="navbar-nav ml-lg-5 ml-md-5 ml-sm-5">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
            </ul>
        </div>
            <button class="btn btn-outline-custom mr-lg-5 mr-md-5 mr-sm-5" type="submit" data-toggle="modal" data-target="#signupModal">SIGN UP</button>
</nav>

Answer 1

明确地将float-right类提供给按钮。你也可以根据断点设置浮点数来检查Docs

另一种方法是Hide和Show断点。然后你需要有两个像这样的按钮

<button class="btn btn-outline-custom mr-lg-5 mr-md-5 mr-sm-5 d-none d-lg-block d-xl-none" type="submit" data-toggle="modal" data-target="#signupModal">SIGN UP</button>
<button class="btn btn-outline-custom mr-lg-5 mr-md-5 mr-sm-5 float-right d-lg-none d-xl-block" type="submit" data-toggle="modal" data-target="#signupModal">SIGN UP</button>

如果您只有大屏幕lg，则会显示第一个按钮d-none d-lg-block d-xl-none

第二个按钮只会显示在小型屏幕上，该级别小于lg此级别d-lg-none d-xl-block我还提供了一个float-right级别来移动它。

您可以看到更多选项here