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

【问题标题】：Exclude an item inside the navbar from collapsing从折叠中排除导航栏中的项目
【发布时间】：2017-10-26 23:26:54
【问题描述】：

所以我有一个 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>

【问题讨论】：

标签： html css bootstrap-4

【解决方案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 与此 calss d-none d-lg-block d-xl-none

第二个按钮只会显示在小于lg 这个类d-lg-none d-xl-block 的小屏幕上，我还给了一个float-right 类来向右移动它。

你可以看到更多选项here

【讨论】：