BS3导航栏存在问题，当我更改屏幕尺寸时，导航栏列表项会落后于导航栏品牌形象。
我希望导航栏项目在进入导航栏品牌之前先分解为汉堡包菜单。我该如何实现？
这是我的HTML代码：
<!DOCTYPE html>
<head>
<meta charset = "UTF-8">
<!-- BS, JS, FONTS -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- CSS -->
<link rel = "stylesheet" type = "text/css" href = "navbarProb.css"/>
</head>
<body id="index" data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- NAVBAR -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- MOBILE NAVBAR -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#listItem1">
<img src = "https://image.ibb.co/jN2AaV/logo.jpg">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#listItem1">listItem1</a></li>
<li><a href="#listItem2">listItem23</a></li>
<!-- DROPDOWN NAVBAR -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">listItem3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#listItem4">listItem4</a></li>
<li><a href="#listItem5">listItem5</a></li>
<li><a href="#listItem6">listItem6</a></li>
<li><a href="#">listItem</a></li>
<li><a href="#">listItem</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">listItem<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#listItem7">listItem7</a></li>
<li><a href="#">listItem</a></li>
<li><a href="#">listItem</a></li>
<li><a href="#">listItem</a></li>
<li><a href="#">listItem</a></li>
<li><a href="#">listItem</a></li>
</ul>
</li>
<li><a href="#listItem8">listItem8</a></li>
<li><a href="#listItem9">listItem9</a></li>
<li><a href="#listItem10">listItem10</a></li>
</ul>
</div>
</div>
</nav>谢谢！
最佳答案
@ j.b
Bootstrap将导航转换为767px以下的汉堡包，并且在您期望的情况下，应该在1021px之后进行转换，如果要使其成为可能，您必须编写媒体查询@media (max-width: 1021px)和您的汉堡包代码，这是不可能的。
有什么需要的话请告诉我。