Question

我开始学习bootstrap并且我正在使用导航栏做一个基本的例子。我在这里去了navbar的bootstrap文档 - ＆gt; “http://getbootstrap.com/2.3.2/components.html#navbar”并将代码复制到我的项目中，但菜单显示全部未格式化。可能有什么不对？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <link rel="stylesheet" href="css/template.css" />
    <link rel="stylesheet" href="css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap.css" />
    </head>

    <body>
        <div class="container">
            <div class="row" id="topo">
                <div class="span5">
                    <a href="index.html" title="Index">
                        <img src="logo.png" alt="Logo"/>
                    </a>
                </div>
            </div><!--end top-->

            <div class="row" id="navegation">
                <div class="span12">
                    <div class="navbar">
                        <div class="navbar-inner">
                            <a class="brand" href="#">Title</a>
                            <ul class="nav">
                              <li><a href="#">Link</a></li>
                              <li><a href="#">Link</a></li>
                            </ul>
                         </div>
                   </div>
             </div>
          </div><!--end navegation-->
    </div><!--end container-->


    <script src="js/bootstrap.min.js"></script>

    </body>
    </html>

我得到的是： enter image description here

Answer 1

我认为您已经下载了Bootstrap 3文件，但正在阅读Bootstrap 2文档。

使用Bootstrap 2文件的代码可以正常工作：http://jsbin.com/vazesuto/1/edit

但是使用Bootstrap 3文件会产生您显示的错误：http://jsbin.com/vazesuto/3/edit

请尝试阅读Bootstrap 3的导航栏文档：http://getbootstrap.com/components/#navbar

Answer 2

你是如何将链接复制到bootstrap的？原因在于该示例代码假设您将它放在计算机中的某个位置，而不是直接链接到它，就像JQuery脚本源所做的那样。如果还没有，则需要先下载bootstrap，然后编写适当的路径（取决于你将它放在计算机上的位置）。

编辑：升级到最新版本的bootstrap后，请确保您关注this answer上的内容，因为OP似乎遇到了与您相同的问题。

为什么bootstrap导航栏无法正常工作？

2 个答案: