如何忽略 Bootstrap 4 的 left-hand 汉堡包折叠菜单中的项目？

Question

我想让这个汉堡忽略我的购物车和登录按钮。我已在此代码段中的所有屏幕尺寸上强制折叠菜单视图，因此您可以看到它是如何不按我想要的方式工作的。

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

一切都按照我想要的方式运行，除了购物车和登录与汉堡包一起下降，而不是停留在顶部与徽标。

徽标留在顶部的原因是因为徽标写在 div 之前，这会启动折叠 (id="oaNavbar")。此 div 包含导航项的无序列表。

问题是我在无序列表被扔进汉堡后添加的任何内容 drop-down。我希望登录名和购物车保持在最前面。

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

有什么方法可以让购物车和登录保持不变？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />

  <!-- Additional CSS must be placed after Bootstrap CSS -->
  <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
  <link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css" />
  <link rel="stylesheet" href="node_modules/bootstrap-icons/package.json">
  <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans" /> -->
  <link rel="stylesheet" href="css/styles.css" />

  <title>Document</title>
</head>


<body>

  <!-- Nav Bar -->
  <nav class="navbar navbar-expand-xl 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="https://clipground.com/images/spongebob-png-icons-8.jpg" width="50" 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>
    
    <!-- Login button -->
    <div class="navbar-text ml-auto">
      <button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal" data-target="#loginModal">Login</button>
    </div>

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

  </nav>

  <!-- styling links -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>

</html>

Answer 1

我已将“col-sm-2 fixed-top”添加到第二个 div。

<!-- 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>

Answer 2

我在 Viswanatha Swamy 的帮助下弄明白了。

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

我看了看 Bootstrap 的 col-sm-2 和 fixed-top 后面的 CSS。我最终自己写了 CSS 来解决这个问题。

我将两个按钮包裹在一个 div 中并添加了这个 CSS:

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

我需要 margin-top，因为固定的 top: 0 会导致非常顶部被压扁，而 top 的任何值都会导致按钮与汉堡包一起掉落。

我添加了一个 margin-top 来补偿顶部：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>

如何忽略 Bootstrap 4 的 left-hand 汉堡包折叠菜单中的项目？

How to ignore items in menu collapse with a left-hand hamburger for Bootstrap 4?

collapse

navbar

hamburger-menu

bootstrap-4