bootstrap 3 элементы списка navbar пересекаются с брендом navbar - PullRequest
Новая
       7

bootstrap 3 элементы списка navbar пересекаются с брендом navbar

0 голосов
/ 21 ноября 2018

У меня проблема с навигационной панелью BS3, когда я меняю размер экрана, элементы списка навигационных панелей идут за имиджем бренда navbar.

Я бы хотел, чтобы элементы навигационной панели свернулись в меню гамбургеров, прежде чем они достигнут торговой марки навигационной панели.,Как мне этого добиться?

Вот мой 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>

Спасибо!

1 Ответ

0 голосов
/ 21 ноября 2018

@ jb

Bootstrap преобразует навигацию в гамбургер ниже 767px, и в вашем ожидаемом сценарии она должна конвертироваться после 1021px, что невозможно, если вы хотите сделать возможным создание медиазапроса @media (max-width: 1021px) и ваш код гамбургера.

дай мне знать, если тебе что-нибудь понадобится.

...