bootstrap 3 导航栏列表项与导航栏品牌重叠答案

【问题标题】：bootstrap 3 navbar list items overlap with navbar brandbootstrap 3 导航栏列表项与导航栏品牌重叠
【发布时间】：2019-04-03 17:14:17
【问题描述】：

我在使用 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>

谢谢！

【问题讨论】：

标签： html css twitter-bootstrap navbar

【解决方案1】：

@j.b

Bootstrap 将导航转换为 767px 以下的汉堡包，在您预期的情况下，它应该在 1021px 之后转换，如果您想让您必须编写媒体查询 @media (max-width: 1021px) 和您的汉堡包代码成为可能，这是不可能的。

如果您需要任何东西，请告诉我。

【讨论】：

您好 Atul，感谢您的参与！当我将 CSS 中的媒体查询更改为 @media (min-width:1021px) { .navbar-right { position: absolute;右：10px； } } ，导航栏项目在到达导航栏品牌时下拉到第二行...
你不必把CSS绝对你只需要把汉堡代码。