如何使用 Bootstrap 4 的左手汉堡忽略菜单折叠中的项目？
Posted
技术标签:
【中文标题】如何使用 Bootstrap 4 的左手汉堡忽略菜单折叠中的项目？【英文标题】：How to ignore items in menu collapse with a left-hand hamburger for Bootstrap 4? 【发布时间】：2021-08-07 07:59:07 【问题描述】：我试图让这个汉堡忽略我的购物车和登录按钮。我在这个 sn-p 中强制所有屏幕尺寸上的折叠菜单视图，这样你就可以看到它是如何不按照我想要的方式工作的。
我想要的： A. 对于 xs 屏幕尺寸：单击汉堡，主页、收藏和类别链接下拉，但徽标（海绵作为占位符）、登录按钮和购物车保持在顶部。 B. 对于 sm-xl 屏幕尺寸：Logo、Home、Categories、Collections（然后是右手）Login、Cart。
一切都按照我想要的方式工作，除了购物车和登录下拉菜单与汉堡包而不是保持在顶部的徽标。
徽标保持在顶部的原因是徽标写在 div 之前，它会启动折叠 (id="oaNavbar")。此 div 包含导航项目的无序列表。
问题是我在无序列表被扔进汉堡下拉菜单后添加的任何内容。我希望登录名和购物车保持在顶部。
您可能会说，“只需将购物车和登录按钮移动到“oaNavbar”之前的区域，因为那是徽标所在的位置，并且它正在运行。”这样做的问题是，在大屏幕上，Logo、Login、Cart、Home、Collections、Categories 看起来真的很恶心。
有什么方法可以让购物车和登录名留在原地吗？
<!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" 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>【问题讨论】：
【参考方案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>
【讨论】：
【参考方案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 会导致在 VERY 顶部挤压，而 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" 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 的左手汉堡忽略菜单折叠中的项目？的主要内容，如果未能解决你的问题，请参考以下文章
如何在移动视图中定位汉堡包 <span> (WP Bootstrap Navwalker)