Twitter Bootstrap, Nav-bar, Drop down не работает должным образом

Я пытаюсь сделать отзывчивый nav-bar с бутстрапом. Однако выпадающее меню работает неправильно.Twitter Bootstrap, Nav-bar, Drop down не работает должным образом

Я хочу, чтобы выпадало под торговой маркой не вместе с ней.

Вот мой код:

<html> 
<head> 
<meta name="viewport" content="width=device-width, intial-scale=1.0"> 
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
<div class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
     <a href="#" class="navbar-brand">ACUPRESSURE</a> 

     <button type="button" class = "navbar-toggle" data-toggle ="collapse" data-target = ".navHeaderCollapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

     <div class = "collapse navbar-collapse navHeaderCollapse"> 

      <ul class="nav navbar-nav navbar-right"> 
       <li><a href ="#">Home</a></li> 
       <li><a href ="#">Home</a></li> 
       <li><a href ="#">Home</a></li> 
       <li><a href ="#">Home</a></li> 
       <li><a href ="#">Home</a></li> 
      </ul> 
     </div>   
    </div> 
</div> 
<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> 
<script src= "js/bootstrap.js"></script> 
</body> 
</html>

источник

2015-11-28 Rishabh Kapoor

Вы упускаете navbar-header класс, который окружает navbar-toggle и navbar-brand. См. Docs.

Рабочий пример.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button><a href="#" class="navbar-brand">ACUPRESSURE</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse navHeaderCollapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

источник

2015-11-28 21:59:22 vanburen

большое спасибо. Я новичок в этом. можете ли вы рассказать мне какой-то онлайн-ресурс, откуда я могу научиться –

Twitter Bootstrap, Nav-bar, Drop down не работает должным образом

ответ

Смежные вопросы