Question

我正在尝试使用像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页面中删除。

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

Answer 2

您正在使用bootstrap 3.3.4，但是参考bootstrap 2.3.2的文档。 jsfiddle here

Bootstrap导航不正确

2 个答案: