Question

我对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>

谢谢！

Answer 1

@ j.b

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

让我知道您是否需要任何东西。

引导程序3导航栏列表项与导航栏品牌重叠

1 个答案: