Меню обрушения бутстрапа появляется над меню

Я делаю сайт с бутстрапом. Я сделал этот код.Меню обрушения бутстрапа появляется над меню

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Krishna Driver Services</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <link rel="stylesheet" type="text/css" href="webstyle.css"> 


    </head> 
    <body> 
    <div class="navbar navbar-default">  

     <div class="container"> 

     <div class="navbar-header"> 

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 

      <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"> 
      <img src="images\logo.png"> 
      </a> 

     </div> 
     <div class="collapse navbar-collapse navbar-right"> 

      <ul class="nav navbar-nav"> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Services</a></li> 
      <li><a href="">Contact Us</a></li> 
      </ul> 

     </div> 


     </div> 
    </div> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

& этот CSS код

.navbar-default{ 
    min-height:160px; 
}

Мое меню коллапс появляется только над логотипом. Я думаю, что это происходит из-за изменения ширины навигатора.

источник

2015-01-07 Brijesh Maurya

UPDATE

Это было сделано для меня ясно, в комментариях, что я пропустил точку вопроса, так вот реальный ответ:

Вы должны убедиться, что не только navbar, но и высоту изменения заголовка навигатора. Очевидный способ сделать это, чтобы изменить CSS для

.navbar-default, .navbar-default .navbar-header{ 
    min-height:160px; 
}

Посмотрите на эту скрипку: http://jsfiddle.net/cr2frn1p/6/

я уверен, что есть и другие, более элегантные решения, и я уверен, что я использовал один из них в проекте не так давно, но сейчас у меня нет времени его искать. Если вам интересно, я могу включить его здесь завтра.

ОРИГИНАЛЬНЫЙ ПОСТ

Выглядит хорошо для меня: http://jsfiddle.net/cr2frn1p/

Выполнение некоторых догадок здесь: Вы могли бы иметь в виду тот факт, что верхний край логотипа и кнопки не идеально выровнены. Это потому, что .navbar-бренд имеет отступы 15px, а .navbar-переключатель имеет запас 8px, просто добавьте в ваш CSS:

.navbar-toggle { 
    margin-top: 15px; 
}

источник

2015-01-07 15:58:35 mmgross

Вашей скрипка не загружает версию JQuery, и не включает в себя .js библиотека для Bootstrap. Таким образом, он не полностью функционирует, и этот ответ не решает проблему, которую испытывает ассер. Загрузите его правильно, и вы увидите, о чем они говорят. – MattD

Протестировано с помощью jquery-1.11: http://jsfiddle.net/cr2frn1p/4/ и jquery-2.1: http://jsfiddle.net/cr2frn1p/5/ Все еще не удается найти что-то не так – mmgross

Свернуть представление результата поэтому он вызывает кнопку переключения мобильного телефона, затем нажмите кнопку ... – MattD

Меню обрушения бутстрапа появляется над меню

ответ

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