2015-04-30 3 views
0

Я пытаюсь иметь самозагрузки навигации, как этот oneBootstrap навигация не выходит правый

Но это в приложении ROR, и он держит укладки, независимо от того, что я делаю.

Итак, я решил создать простой HTML-файл, чтобы увидеть, что мне здесь не хватает.

Это код:

<!DOCTYPE html> 
    <head> 
    <title></title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    </head> 

    <body> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
     <a class="brand" href="#">Title</a> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
     </div> 
    </div> 
    </body> 
    </html> 

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

Что НА ЗЕМЛЕ Я делаю неправильно здесь?!?! ??!?!?!

EDIT Навигация сверху полностью сорван с загрузочной страницы, как указано выше.

+1

Вы используете bootstrap 3.3.4, но ссылаетесь на документы bootstrap 2.3.2. [Это обновленная документация] (http://getbootstrap.com/components/#navbar) – AbM

+0

@AbM, чувак! Спасибо огромное! Если вы хотите, чтобы это было принято, сделайте это ответом, и я с радостью приму это! :) – user273072545345

ответ

2

Вы используете Bootstrap 2.3.2 документы, но в том числе 3.3.4 files, а затем вы пытаетесь сделать 2.3.2 navbar (который не работает).

Использование Bootstrap 3.3.4 docs, код Navbar должен выглядеть следующим образом:

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
</nav> 

В противном случае, если вы намерены использовать 2.3.2 документы нужно исправить ваши 3 включены файлы ...

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script> 
+1

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