大佬教程收集整理的这篇文章主要介绍了Bootstrap：如何避免汉堡菜单破坏导航和徽标？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我使用 bootstrap 5.02 创建了我的网站。我的网站地址如下：https://www.cafetiere-automatique.fr
问题是当我为手机和平板电脑视图制作汉堡菜单时，汉堡菜单破坏了导航和徽标。我的意思是它推动了左侧的徽标并使其变得非常小。
我的 HTML 代码可能有错误，或者解决方案可能是添加一些新代码。
总而言之，我从 bootstrap 中添加了一个导航代码，但汉堡菜单在平板电脑和移动设备视图上的另一行中下降了。因此，我在以下 sippet 中添加了 flex-nowrap 类：
<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,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,images/carousel2-tr-krups-essential-machine-a-cafe-a-grain-broyeur-noir-cafetIEre-automatique@0,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,images/carousel3-tr-philips-ep2221-40-machine-espresso-serIEs-2200-mousseur-a-lait-noir-laque-cafetIEre-automatique@0,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,images/card1-krups-essential-noire-cafetIEre-automatique-broyeur-grains-cafe@0,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 @R_723_4041@-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,images/card2-de-longhi-magnifica-s-ecam22.110.b-noir-cafetIEre-automatique-mousseur-a-lait@0,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 @R_723_4041@-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,images/card3-krups-essential-noire-cafetIEre-automatique-espresso@0,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 @R_723_4041@-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,images/card4-krups-essential-noire-cafetIEre-automatique-latte@0,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 @R_723_4041@-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%;
}
以上是大佬教程为你收集整理的Bootstrap：如何避免汉堡菜单破坏导航和徽标？全部内容，希望文章能够帮你解决Bootstrap：如何避免汉堡菜单破坏导航和徽标？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。