我是开发新手,但我无法弄清楚为什么我的导航栏的引导样式不完整。它并不尊重固定导航栏,向右浮动的元素等元素。
在我脑海里
<!doctype html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--custom fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato|Supermercado+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway|Sedgwick+Ave" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
Navbar编码如下:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><left-nav>The Hoary Gamer</left-nav></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar" role="navigation">
<ul class="nav navbar-nav navbar-right">
<right-nav>
<li><a href="#games">Games</a></li>
<li><a href="#music">Music</a></li>
<li><a href="#culture">Culture</a></li>
</right-nav>
</ul>
</div>
</div>
</nav>
在我的
底部调用所有必需的jquery和js for bootstrap<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
任何想法??
更新 - 重复的帖子被链接到修复它。我的代码有错误的Bootstrap版本。喂!