I am using the framework of a previous website I built as part of an assignment to build an actual website. However, when I copy all the code over, my navs do not look the same as they did when I did my assignment.
我正在使用我之前建立的网站的框架作为建立实际网站的任务的一部分。但是,当我复制所有代码时,我的导航看起来与我完成作业时看起来不一样。
Here is the code, and you can view a live example of it at 192.241.215.180
这是代码,您可以在192.241.215.180查看它的实例
The navigations are supposed to be "pills" and they are supposed to go across, not stack up.
导航应该是“药丸”,他们应该穿过,而不是堆积。
<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 © John Harvard
</div>
</div>
</body>
4 个解决方案
#1
0
you have a couple issues. First, your markup is incorrect, if you want pills, you need to use nav-pills class for the <ul> element, like this:
你有几个问题。首先,你的标记是不正确的,如果你想要药丸,你需要使用nav-pills类来获取
-
元素,如下所示:
<ul class="nav nav-pills">
While this should be enough, this alone won't do anything, because you have a bad CSS file and a bad JQuery file. I don't know how you managed to do that, but that's what you got. So, instead of using your files, try using the CDN versions, like this:
虽然这应该足够了,但这本身不会做任何事情,因为你有一个糟糕的CSS文件和一个糟糕的JQuery文件。我不知道你是怎么做到的,但这就是你得到的。因此,请尝试使用CDN版本,而不是使用您的文件,如下所示:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
and
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
test them and see how they work out for you, but I'm sure this will fix your issues
测试它们,看看它们是如何为你工作的,但我相信这会解决你的问题
#2
0
Try this:
Use <ul class="nav nav-pills">
使用
FULL 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 © John Harvard
</div>
</div>
DEMO
#3
0
Something is wrong with your version of Bootstrap. Using this worked for me:
您的Bootstrap版本出了问题。用这个对我有用:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
#4
0
there are some problem in your bootstrap.min.css
你的bootstrap.min.css中有一些问题
you can use this links
你可以使用这个链接
<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">
after these changes this will fix your issues
在这些更改之后,这将解决您的问题
#1
0
you have a couple issues. First, your markup is incorrect, if you want pills, you need to use nav-pills class for the <ul> element, like this:
你有几个问题。首先,你的标记是不正确的,如果你想要药丸,你需要使用nav-pills类来获取
-
元素,如下所示:
<ul class="nav nav-pills">
While this should be enough, this alone won't do anything, because you have a bad CSS file and a bad JQuery file. I don't know how you managed to do that, but that's what you got. So, instead of using your files, try using the CDN versions, like this:
虽然这应该足够了,但这本身不会做任何事情,因为你有一个糟糕的CSS文件和一个糟糕的JQuery文件。我不知道你是怎么做到的,但这就是你得到的。因此,请尝试使用CDN版本,而不是使用您的文件,如下所示:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
and
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
test them and see how they work out for you, but I'm sure this will fix your issues
测试它们,看看它们是如何为你工作的,但我相信这会解决你的问题
#2
0
Try this:
Use <ul class="nav nav-pills">
使用
FULL 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 © John Harvard
</div>
</div>
DEMO
#3
0
Something is wrong with your version of Bootstrap. Using this worked for me:
您的Bootstrap版本出了问题。用这个对我有用:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
#4
0
there are some problem in your bootstrap.min.css
你的bootstrap.min.css中有一些问题
you can use this links
你可以使用这个链接
<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">
after these changes this will fix your issues
在这些更改之后,这将解决您的问题