html - Bootstrap：如何避免汉堡菜单破坏导航和标志？
问题描述
我用 Bootstrap 5.02 创建了我的网站。我的网站地址如下：https ://www.cafetiere-automatique.fr
问题是当我为移动和平板电脑视图制作汉堡菜单时，汉堡菜单破坏了导航和徽标。我的意思是它将徽标推到左侧并使其非常小。
我的 html 代码可能有错误，或者解决方案可能是添加一些新代码。
总而言之，我从 Bootstrap 中放了一个导航代码，但汉堡菜单在平板电脑和移动设备视图的另一行上下降了。所以，我flex-nowrap在下面的 sippet 上添加了这个类：
<div class="container">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<div class="container-fluid flex-nowrap">
现在，汉堡菜单与徽标保持在同一行。但是，当您单击它时，下拉菜单会破坏徽标并将其推到左侧。基本上，下拉菜单应该在底部向下滚动。
请在下面找到我网站的源代码：
<!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">
<title>Logo Cafetière Automatique</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Open+Sans:wght@300;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<div class="container-fluid flex-nowrap">
<nav class="navbar navbar-light">
<div class="container">
<a class="navbar-brand" href="/">
<img src="images/logo-cafetiere-automatique-blanc-carre.svg" alt="Logo Cafetière Automatique" width="350" height="auto" class="img-fluid">
</a>
</div>
</nav>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- BUTTON - DROPDOWN -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto float-end mb-2 mb-lg-0">
<li class="nav-item dropdown btn btn-outline-light me-4" style="width: 120px;">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Marques
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">De'Longhi</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Krups</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Philips</a></li>
</ul>
</li>
<!-- BUTTON - NORMAL -->
<li class="nav-item btn btn-outline-light" style="width: 120px;">
<a class="nav-link text-white" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Jumbotron -->
<div class="jumbotron">
<div class="row">
<div class="col-12 col-md-7 text-center text-md-start">
<h1 class="display-1 text-white drop-shadow">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-outline-light btn-lg mt-4 px-5 py-3" href="#" role="button">Learn more</a>
</p>
</div>
<div class="col-12 col-md-5">
<img src="images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique@0,25x.webp" alt="Cafetière automatique De'Longhi Magnifica avec broyeur espresso et latte" class="img-fluid" width="1000px" height="auto" srcset="images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique@0,25x.webp 500w, images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique@0,5x.webp 1000w, images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique.webp 1500w">
</div>
</div>
</div>
<!-- Shop's Message -->
<div class="row">
<div class="col-12 col-md-4">
<img src="images/message-boutique-cafetiere-automatique@0,5x.webp" alt=" Message boutique Cafetière Automatique" width="1000" height="auto" class="img-fluid border rounded-start border-0" srcset="images/message-boutique-cafetiere-automatique@0,5x.webp 500w, images/message-boutique-cafetiere-automatique@0,75x.webp 1000w, images/message-boutique-cafetiere-automatique.webp 1500w">
</div>
<div class="col-12 col-md-8 bg-white p-4 d-flex align-items-center border border-dark rounded-end border-lg">
<section>
<h2>Message from our shop</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero at repellendus doloribus pariatur itaque assumenda excepturi voluptatem velit distinctio id, dolor illum reprehenderit sint labore ex, suscipit provident repellat architecto harum ad sequi sit numquam ullam. Repudiandae, necessitatibus. In reprehenderit provident quisquam sapiente mollitia porro quidem, qui laborum a adipisci eum odio aliquid laboriosam veritatis magni ad minus rem minima.</p>
</section>
</div>
</div>
<!-- Carousel -->
<div id="carouselExampleControls" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="3000">
<img src="images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique@0,25x.webp" class="d-block mx-auto img-fluid" width="1000px" height="auto" alt="Cafetière automatique De'Longhi Magnifica Expresso avec broyeur" srcset="images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique@0,25x.webp 500w, images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique@0,5x.webp 1000w, images/carousel1-tr-de-longhi-magnifica-s-machine-expresso-broyeur-ecam22.110.b-noir-cafetiere-automatique.webp 1500w">
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="images/carousel2-tr-krups-essential-machine-a-cafe-a-grain-broyeur-noir-cafetiere-automatique@0,25x.webp" class="d-block mx-auto img-fluid" width="1000px" height="auto" alt="Cafetière automatique Krups Essential machine à café avec broyeur à grain" srcset="images/carousel2-tr-krups-essential-machine-a-cafe-a-grain-broyeur-noir-cafetiere-automatique@0,25x.webp 500w, images/carousel2-tr-krups-essential-machine-a-cafe-a-grain-broyeur-noir-cafetiere-automatique@0,5x.webp 1000w, images/carousel2-tr-krups-essential-machine-a-cafe-a-grain-broyeur-noir-cafetiere-automatique.webp 1500w">
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="images/carousel3-tr-philips-ep2221-40-machine-espresso-series-2200-mousseur-a-lait-noir-laque-cafetiere-automatique@0,25x.webp" class="d-block mx-auto img-fluid" width="1000px" height="auto" alt="Cafetière automatique Philips E2221/40 machine à Espresso séries 2200 avec mousseur à lait" srcset="images/carousel3-tr-philips-ep2221-40-machine-espresso-series-2200-mousseur-a-lait-noir-laque-cafetiere-automatique@0,25x.webp 500w, images/carousel3-tr-philips-ep2221-40-machine-espresso-series-2200-mousseur-a-lait-noir-laque-cafetiere-automatique@0,5x.webp 1000w, images/carousel3-tr-philips-ep2221-40-machine-espresso-series-2200-mousseur-a-lait-noir-laque-cafetiere-automatique.webp 1500w">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Cards -->
<div class="row row-cols-1 row-cols-md-2 g-4 my-5">
<div class="col">
<div class="card shadow border-0" style="width: 100%;">
<img src="images/card1-krups-essential-noire-cafetiere-automatique-broyeur-grains-cafe@0,25x.webp" class="card-img-top img-fluid" alt="Krups Essential cafetière automatique noire broyeur à grains de café" srcset="images/card1-krups-essential-noire-cafetiere-automatique-broyeur-grains-cafe@0,25x.webp 500w, images/card1-krups-essential-noire-cafetiere-automatique-broyeur-grains-cafe@0,5x.webp 1000w, images/card1-krups-essential-noire-cafetiere-automatique-broyeur-grains-cafe.webp 1500w">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card shadow border-0" style="width: 100%;">
<img src="images/card2-de-longhi-magnifica-s-ecam22.110.b-noir-cafetiere-automatique-mousseur-a-lait@0,25x.webp" class="card-img-top img-fluid" alt="De'Longhi Magnifica S ECAM 22.110 B noir mousseur à lait cafetière automatique" srcset="images/card2-de-longhi-magnifica-s-ecam22.110.b-noir-cafetiere-automatique-mousseur-a-lait@0,25x.webp 500w, images/card2-de-longhi-magnifica-s-ecam22.110.b-noir-cafetiere-automatique-mousseur-a-lait@0,5x.webp 1000w, images/card2-de-longhi-magnifica-s-ecam22.110.b-noir-cafetiere-automatique-mousseur-a-lait.webp 1500w">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card shadow border-0" style="width: 100%;">
<img src="images/card3-krups-essential-noire-cafetiere-automatique-espresso@0,25x.webp" class="card-img-top img-fluid" alt="Krups Essential cafetière automatique noire espresso" srcset="images/card3-krups-essential-noire-cafetiere-automatique-espresso@0,25x.webp 500w, images/card3-krups-essential-noire-cafetiere-automatique-espresso@0,5x.webp 1000w, images/card3-krups-essential-noire-cafetiere-automatique-espresso.webp 1500w">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card shadow border-0" style="width: 100%;">
<img src="images/card4-krups-essential-noire-cafetiere-automatique-latte@0,25x.webp" class="card-img-top img-fluid" alt="Krups Essential cafetière automatique noire latte" srcset="images/card4-krups-essential-noire-cafetiere-automatique-latte@0,25x.webp 500w, images/card4-krups-essential-noire-cafetiere-automatique-latte@0,5x.webp 1000w, images/card4-krups-essential-noire-cafetiere-automatique-latte.webp 1500w">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
有没有人可以帮我解决这个问题？
解决方案
这是因为当你点击汉堡时，你所在的.navbar-collapse班级相对转向。display:block
为避免此问题，您需要.navbar-collpase在平板电脑/移动设备视口中将类设为绝对类或固定类。
添加这些代码行会给你一个想法。
.navbar-collapse {
position: absolute;
width: 100%;
top: 100%;
}
推荐阅读
- c# - C# 出站 HTTP 请求事件
- anypoint-studio - Mule 4 从 Cloudhub usinf 文件连接器上的 /tmp 目录写入和读取？
- angular - 传递给子组件时找不到异步管道
- java - 如何等待线程起点直到方法完成
- javascript - 带有未定义对象名称的 ReferenceError
- ios - Cordova ios angularjs没有找到模板
- azure-cognitive-search - 存在分析器或 tokenFilters 元素时使用 SDK 创建索引时出错
- android - 成功构建另一个应用程序后，缓存会导致 Gradle 同步失败吗？
- postgresql - 没有删除表权限的 Postgresql 角色
- sql-server-2008 - 未使用 BEGIN 或 END TRANSACTION 的存储过程中的事务错误