html - 无法让 Bootstrap 导航正确显示

标签 html css twitter-bootstrap

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

这是代码,您可以在 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>

最佳答案

你有几个问题。首先,您的标记不正确,如果您想要药片,则需要为 <ul> 使用 nav-pills 类元素,像这样:

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

测试它们,看看它们如何为您工作,但我相信这会解决您的问题

关于html - 无法让 Bootstrap 导航正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25696974/

相关文章:

css - 在 Wordpress CSS Styling @media screen and (max-width : 1024px) will not work

javascript - 使用 jquery 在行和列的 Bootstrap 网格中动态添加图像?

html - 如何使div的高度等于宽度

php - RegEx 替换 HTML 标签中的所有宽度和高度值

javascript - 如果包含字符串,则重定向 knockout js observable

css - 如何将图像向下移动几个像素?

html - 如何将 IFRAME 移动到 DIV 中?

html - 如何在不同的浏览器中使用形状(多边形)?

html - 如何将整个表格对象推到右边?

angular - 使用 typescript (javascript)触发 ng-bootstrap Accordion 组件?