Bootstrap 4 如何在Bootstrap 4中忽略菜单折叠中的项目？

我试图让这个汉堡包忽略我的购物车和登录按钮。在这段代码中，我在所有屏幕大小上强制使用了折叠菜单视图，以便您可以看到它是如何按照我希望的方式工作的

我想要的是： 对于xs屏幕尺寸：单击汉堡，主页、收藏和分类链接下拉列表，但徽标（海绵宝宝作为占位符）、登录按钮和购物车保持在顶部。 B.对于sm xl屏幕尺寸：徽标、主页、类别、收藏（然后是右手登录）、购物车

一切都按照我想要的方式运行，除了购物车和登录下拉菜单中的汉堡，而不是停留在顶部的标志

logo保持在顶部的原因是，logo是在div之前写入的，div启动折叠（id=“oaNavbar”）。此div包含导航项目的无序列表

问题是我在无序列表被放入汉堡包下拉列表后添加的任何内容。我希望登录和购物车保持在顶部

您可能会说，“只需将购物车和登录按钮移动到“oaNavbar”之前的某个区域，因为这是徽标所在的位置，并且它正在运行。”问题是，在更大的屏幕上，有徽标、登录、购物车、主页、收藏、分类看起来真的很恶心

有没有办法让购物车和登录保持原样

文件





登录

我在第二个div中添加了“col-sm-2固定顶部”

<!-- Login button -->
        <div class="navbar-text ml-auto col-sm-2 fixed-top">
            <button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal"
                data-target="#loginModal">Login</button>

            <!-- Shopping Cart -->
            <a class="btn" href="cart.html"><img src="https://clipground.com/images/icon-cart-clipart-2.jpg"
                    style="width: 30px"></a>
        </div>

登录

---

我在维斯瓦纳塔·斯瓦米的帮助下找到了答案

不幸的是，col-sm-2固定顶部做了一些不必要的事情，比如将我的购物车和登录按钮推到顶部太远，以及一些不同大小的奇怪容器相关的事情。但它确实修复了汉堡外面的按钮

我查看了Bootstrap的col-sm-2和固定顶部后面的CSS。我最终写了自己的CSS来解决这个问题

我将两个按钮包装在一个div中，并添加了以下CSS：

.loginFixed {
position: fixed;
top: 0;
right: 0;
left: auto;
z-index: 1030;
margin-top: 15px;
}

我需要边距顶部，因为固定的顶部：0会导致顶部挤压，而顶部的任何值都会导致按钮随汉堡一起掉落

我添加了一个边距顶部，以补偿顶部：0的紧密性

最终的按钮设置在HTML中如下所示：

<div class="navbar-text loginFixed">
    <button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal" data-target="#loginModal">Login</button>
                

    <a class="btn" href="cart.html"><i class="fa fa-shopping-cart fa-lg"></i></a>
</div>

登录

整个菜单如下所示：

<nav class="navbar navbar-expand-sm navbar-light bg-white sticky-top ">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#oaNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a class="navbar-brand mr-auto" href="#"><img src="img/logo-md-white.png" width="180" style="padding-left: 12px"/></a>
    <div class="collapse navbar-collapse" id="oaNavbar">
            <ul class="navbar-nav" style="padding-left: 5px">
                <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="collections.html"> Collections</a></li>
                <li class="nav-item"><a class="nav-link" href="categories.html"> Categories</a></li>
            </ul>
        </div>
  
    <div class="navbar-text loginFixed">
        <button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal" data-target="#loginModal">Login</button>

        <a class="btn" href="cart.html"><i class="fa fa-shopping-cart fa-lg"></i></a>
    </div>
</nav>

登录