2013-02-14 7 views
3

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

Первый мой головной секции, где файлы шаблона «» мои пользовательские файлы:

<head> 
<title>Hello World</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="/assets/responsive_template/css/bootstrap.css" rel="stylesheet"> 
<link href="/assets/responsive_template/css/bootstrap-responsive.css" rel="stylesheet"> 
<link href="/assets/responsive_template/css/template.css" rel="stylesheet"> 

<script src="/assets/responsive_template/js/jquery.js"></script> 
<script src="/assets/responsive_template/js/jquery-ui-1.10.0.min.js"></script> 
<script src="/assets/responsive_template/js/bootstrap.js"></script> 
<script src="/assets/responsive_template/js/template.js"></script> 
</head> 

Теперь фактический раздел Navbar:

<div class="navbar"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <a href="#" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
      <a class="brand" href="#">Prototype</a> 
      <div class="nav-collapse collapse navbar-responsive-collapse"> 
       <ul class="nav"> 
        <li><a id="back-button" href="#">Back</a></li> 
        <li><a id="submit-button" href="#">Submit</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

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

+0

Было бы здорово, если бы вы создали тестовую страницу. Поиск ответов и помощь становится легче с тестовыми страницами – Shail

ответ

6

Jsfiddle Я создал для вас - http://jsfiddle.net/shail/F4NfT/10/ Работа!

<head> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script> 
</head> 

    <div class="navbar"> 
<div class="navbar-inner"> 
<div class="container"> 

<!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</a> 

<!-- Be sure to leave the brand out there if you want it shown --> 
<a class="brand" href="#">Project name</a> 

<!-- Everything you want hidden at 940px or less, place within here --> 
<div class="nav-collapse collapse"> 
<!-- .nav, .navbar-search, .navbar-form, etc --> 
</div> 

</div> 
</div> 
</div> 
+0

Хмм я до сих пор не могу получить эту локальную работу, но даже в этой скрипте сам раскрывающийся список не работает http://jsfiddle.net/SQLP4/ – Msencenb

+0

Друг, я не вставил меню элементы ... обновили его с помощью пунктов меню ... снова проверьте его работу – Shail

+1

Спасибо, я заметил из вашей скрипки, что вы используете 2.3.0 ... кажется, что у меня была копия bootstrap 2.2.0 и пыталась используйте синтаксис 2.3.0! – Msencenb