引导导航不正确答案

【问题标题】：Bootstrap Navigation Doesn't Come Out Right引导导航不正确
【发布时间】：2015-04-30 01:07:17
【问题描述】：

我正在尝试像这样one

但这是在 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>

但是，如果您复制并粘贴该代码，您将看到的只是堆叠的所有内容，而不是上面链接中的水平菜单。

我到底做错了什么？！？！？？！？！？！

编辑上面的导航完全是从上面链接的引导页面中删除的。

【问题讨论】：

您使用的是 bootstrap 3.3.4，但参考的是 bootstrap 2.3.2 的文档。 This is the updated documentation
@AbM，伙计！非常感谢！如果你想让它被接受，让它成为一个答案，我会很乐意接受它！ :)

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

您正在使用Bootstrap 2.3.2 文档，但包括3.3.4 files，然后您尝试创建2.3.2 navbar（这不起作用）。

使用Bootstrap 3.3.4 docs，您的导航栏代码应如下所示：

<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>

【讨论】：

嘿，谢谢您的回答！这是非常通过！我很感激。自从我告诉其他人我接受他们的回答后，我就投了赞成票。

【解决方案2】：

您使用的是 bootstrap 3.3.4，但参考了 bootstrap 2.3.2 的文档。 This is the updated documentation

【讨论】：