Проблема с навигационной панелью в мобильной форме в Bootstrap 3

-1

Проблема: Когда я просмотрел свой сайт на мобильном телефоне, я увидел, что нет кнопки для отображения/скрытия ссылок на навигационную панель, и теперь ссылки показываются и могут Не скрывайтесь. Когда я тестировал navbars на http://getbootstrap.com/components/#navbar-fixed-top, они отлично работают. Я пробовал перезагружать бутстрап, но ничего не происходит.Проблема с навигационной панелью в мобильной форме в Bootstrap 3

С кодом что-то не так, или я что-то пропустил?

Вот скрипка:

https://jsfiddle.net/td9p60qr/

<!DOCTYPE HTML> 
<html> 
    <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>Jakob Aindreas Rivera</title> 
    <style type="text/css" media="all"> 
     body { padding-top: 70px; } 
    </style> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> 
    <script src="http://code.jquery.com/jquery-2.1.4.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    </head> 
    <body> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="index.html">Jakob Aindreas Rivera</a> 
     </div> 
     <div> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="index.html">Home</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Projects <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="projects/projects.html">Projects Home</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="projects/glass.html">Glass</a></li> 
       <li><a href="projects/clockjs.html">ClockJS</a></li> 
       <li><a href="projects/pixelblocksmod.html">PixelBlocks Mod</a></li> 
      </ul> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    <div class="container"> 
     <div class="jumbotron"> 
     <h1>Welcome to my webzone!</h1> 
     <p>Hello and my name is Jakob Aindreas Rivera, and this is my webzone. Feel free to browse the site!</p> 
     <p>Thank you for stopping by! ;)</p> 
     </div> 
     <div class="page-header"> 
     <h2>News</h2> 
     </div> 
     <article> 
     <div class="row"> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <div class="caption"> 
       <h3>PixelBlocks intial release soon!</h3> 
       <p>THe new MC mod PixelBlocks will now have it's intial release date soon!</p> 
       <p><a href="#" class="btn btn-primary" role="button">Read more</a></p> 
       </div> 
      </div> 
      </div> 
     </div> 
     </article> 
    </div> 
    </body> 
</html>

источник

2015-12-06 jakobaindreas_11

Я только что исправил его, но ответ выше помог мне тоже.

Что я сделал, это переставить мои файлы JavaScript, я переместил jQuery из строки после загрузочного JS-файла в строку перед файлом Bootstrap JS.

Пример:

<script src="http://code.jquery.com/jquery-2.1.4.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

источник

2015-12-10 09:16:59

Кажется, что вы используете эту функцию неправильно. Ниже вы можете найти запчасти только с navbar.

<div class="navbar navbar-inverse navbar-fixed-top"> 
<div class="container"> 
    <!-- Header --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Jakob Aindreas Rivera</a> 
    </div> 
    <!-- Navbar Links --> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div> 
</div>

Также здесь есть ссылка на JS-скрипкой: Navbar jsfiddle.

источник

2015-12-06 11:29:27

спасибо помогло проблему, но кнопка не работает, пока я переставить файлы JS. Спасибо, что помогли решить это! ;) –

Проблема с навигационной панелью в мобильной форме в Bootstrap 3

ответ

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