Bootstrap collapsable nav bar не отображается

Я новичок в Bootstrap и пытаюсь создать одно из этих сворачиваемых навигационных меню, которое имеет три маленькие строки при обнаружении небольшого экрана. Меню появляется, когда экран большой, но когда он мал, меню исчезает.Bootstrap collapsable nav bar не отображается

HTML:

<nav class="navbar"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-targert="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <div><!--end navbar header--> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">About Us</a></li> 
      <li><a href="#">Contact Us</a></li> 
     </ul> 
     </div><!--end myNavbar--> 
    </div><!--end container--> 
    </nav><!--end nav--> 

    <div class="container"> 
     <div class="row"> 
     <div class="col-sm-4"><p style="background-color: yellow">This is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some text</p></div> 
     <div class="col-sm-8"><p style="background-color: yellow">This is some text</p></div> 
     </div><!--end row--> 
    </div><!--end container-->

CSS:

Поставляется с: <link rel="stylesheet" href="css/bootstrap.css"> который является продавцом по умолчанию поставляется.

источник

2015-09-20 Robert Rocha

Пожалуйста, ваши CSS тоже. –

CSS по умолчанию используется для создания буфера. Я ничего не написал. –

1 data-targert = "# myNavbar" (целевая орфография неверна) (div не закрыт) 3

Your issue. 
1 data-targert="#myNavbar" (target spelling is wrong) 
2 <div><!--end navbar header--> (div is not closed) 
3 <nav class="navbar"> (<nav class="navbar navbar-inverse"> or <nav class="navbar navbar-default">)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<body> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
     <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> 
 
     </div><!--end navbar header--> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">About Us</a></li> 
 
      <li><a href="#">Contact Us</a></li> 
 
     </ul> 
 
     </div><!--end myNavbar--> 
 
    </div><!--end container--> 
 
    </nav><!--end nav--> 
 

 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-sm-4"><p style="background-color: yellow">This is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some texthis is some text</p></div> 
 
     <div class="col-sm-8"><p style="background-color: yellow">This is some text</p></div> 
 
     </div><!--end row--> 
 
    </div><!--end container--> 
 
</body>

источник

2015-09-21 05:37:31

Укажите стиль NavBar так:

<nav class="navbar navbar-inverse">

ИЛИ

<nav class="navbar navbar-default">

Если вы хотите пользовательский стиль Navbar, затем

HTML:

<nav class="navbar someNavbar">

CSS:

.someNavbar .navbar-toggle { 
    background-color: #FFF; /* change color accordingly */ 
} 
.someNavbar .icon-bar { 
    background-color: #000; /* change color accordingly */ 
}

Q. Каковы выше классы?

navbar-toggle главная кнопка

icon-bar те линии

Кроме того, убедитесь, что ваш файл bootstrap.js загружен ПОСЛЕ файл jQuery.js так:

<script src="path/to/jQueryFile"></script> 
<script src="path/to/BootstrapFile"></script>

И что только один jQuery lin k есть (добавление нескольких файлов jQuery приводит к конфликтам в зависимых от jQuery скриптах).

источник

2015-09-20 23:15:31

Я не уверен.Я использовал код здесь: http://getbootstrap.com/components/ –

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

Обновите страницу, нажмите кнопку еще раз, а затем проверьте консоль браузера (F12 в Chrome) и посмотрите, отображаются ли какие-либо ошибки. –

Проблема была опечаткой.

Неправильно: data-targert="#myNavbar"

Правильно: data-target="#myNavbar"

источник

2015-09-20 23:38:48

Bootstrap collapsable nav bar не отображается

ответ

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