Question

我是开发新手，但我无法弄清楚为什么我的导航栏的引导样式不完整。它并不尊重固定导航栏，向右浮动的元素等元素。

在我脑海里

<!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版本。喂！

Bootstrap导航样式不完整

0 个答案: