如何使用 Bootstrap 4 的左侧汉堡包忽略菜单折叠中的项目？

问题描述

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

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

一切都按我想要的方式工作，除了“购物车”和“登录”下拉菜单中的汉堡，而不是顶部的徽标。

徽标保持在顶部的原因是徽标写在启动折叠的 div (id="oaNavbar") 之前。这个 div 包含一个无序列表的导航项。

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

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

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

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

解决方法

我已将“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>

我在 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 collapse hamburger-menu navbar navbar