Bootstrap navbar doesn't behave as expected
Question
I'm trying out the simpliest examples from bootstrap tutorials - page headers, navbar. But while the header works fine, the navbar isn't displayed properly.
I have a project_name folder and inside:
project_name
bootstrap
css: bootstrap.css, bootstrap.min.css, bootstrap-
responsive.css, bootstrap-responsive.min.css
img
js: bootstrap.js, bootstrap.min.js, jquery.js
index.html
So, the bootstrap and jquery seem to be in order and the index.html code seems to be ok too.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<link rel="stylesheet" type="text/css"
href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<!-- HEADER -->
<div class="page-header">
<h1 align="center">Some title
<small>some subtitle</small>
</h1>
</div>
<!-- HAVBAR-->
<nav class = "navbar navbar-inverse" role ="navigation">
<div class="container">
<a class="navbar-brand" href="#">NAVBAR</a>
</div>
<div class = "navbar-header">
<ul class = "nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href = "#">SVN</a></li>
</ul>
</div>
</nav>
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body></html>
It gives:
I can't figure out what's wrong..
I expect to get the similar result (but different text and inverse colors):
3 answers
solution1
3 2016-09-12 17:49:08
Put Navbar on the top.
Try this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- HEADER -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">NAVBAR</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
</ul>
</div>
</nav>
</body>
</html>
solution2
1 ACCPTED 2016-09-12 17:41:24
The error was in <div class = "navbar-header"> as it should be associated to the logo not the list.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> </ul> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
solution3
1 2016-09-12 17:47:46
If you want your design to look exactly like the image you have attached, you simply need to exclude this block of code
<div class="page-header">
<h1 align="center">Some title
<small>some subtitle</small>
</h1>
</div>
Excluding this code will give you a UI just like the one in your attached image. For another basic tutorial on navbars, check out this site: http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.