DEMO

Question

我正在使用我之前建立的网站框架，作为构建实际网站的任务的一部分。但是，当我复制所有代码时，我的导航看起来与我完成作业时看起来不一样。

以下是代码，您可以在192.241.215.180

查看其实例

导航应该是“药丸”，他们应该穿过，而不是堆积。

<head>

    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/bootstrap-theme.min.css" rel="stylesheet"/>
    <link href="/css/styles.css" rel="stylesheet"/>

                <title>C$50 Finance: Portfolio</title>

    <script src="/js/jquery-1.10.2.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/scripts.js"></script>

</head>

<body>

    <div class="container">

        <div id="top">
            <a href="/"><img alt="C$50 Finance" src="/img/logo.gif"/></a>
        </div>

        <div class="navbar nav-pills" role="navigation">
            <div class="navbar-inner">
                <div class="container">
                    <ul class="nav navbar-nav">
                        <li><a href="/index.php">Home</a></li>
                        <li><a href="/buy.php">Buy</a></li>
                        <li><a href="/sell.php">Sell</a></li>
                        <li><a href="/quote.php">Quote</a></li>
                        <li><a href="/history.php">History</a></li>
                        <li><a href="/changepassword.php">Change Password</a><li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="middle">
        </div>

        <div id="bottom">
            Copyright &#169; John Harvard
        </div>

    </div>

</body>

Answer 1

试试这个：

使用<ul class="nav nav-pills">

完整的HTML：

<div class="container">

            <div id="top">
                <a href="/">
                    <img alt="C$50 Finance" src="/img/logo.gif" /></a>
            </div>

            <div class="navbar nav-pills" role="navigation">
                <div class="navbar-inner">
                    <div class="container">
                           <ul class="nav nav-pills">
                            <li class="active"><a href="/index.php">Home</a></li>
                            <li><a href="/buy.php">Buy</a></li>
                            <li><a href="/sell.php">Sell</a></li>
                            <li><a href="/quote.php">Quote</a></li>
                            <li><a href="/history.php">History</a></li>
                            <li><a href="/changepassword.php">Change Password</a></li>
                        </ul>
                    </div>
                </div>
            </div>
         <div id="middle">
            </div>

            <div id="bottom">
                Copyright &#169; John Harvard
            </div>

        </div>

DEMO

Answer 2

您的Bootstrap版本出了问题。用这个对我有用：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

Answer 3

你有几个问题。首先，你的标记是不正确的，如果你想要药片，你需要使用nav-pills课程来表示<ul>元素，如下所示：

<ul class="nav nav-pills">

虽然这应该足够了，但仅此一项不会做任何事情，因为你有一个糟糕的CSS文件和一个糟糕的JQuery文件。我不知道你是怎么做到的，但这就是你得到的。因此，请尝试使用CDN版本，而不是使用您的文件：

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

和

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

测试它们并了解它们如何为您服务，但我确信这将解决您的问题

Answer 4

你的bootstrap.min.css中存在一些问题

您可以使用此链接

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

完成这些更改后，这将解决您的问题

无法正确显示Bootstrap Navs

4 个答案:

DEMO