我不熟悉编程，而对HTML还是陌生的。目前正在为我的Web开发课程做课程分配，我们正在为一家虚构的公司制作一个名为“ DW Gift Company”的网页。项目要求之一是在顶部的导航栏（未固定），该导航栏指向几个不同的子页面（关于，项目，订单等）。但是，我被卡在导航栏上，似乎无法使导航栏看起来正确。
这是我下面的代码。我已经获得了nav标签，并确定了ul和li的正确类别（我知道ul是无序列表，但我不确定100％知道li是什么。我正在关注来自教授的在线vid，我是Germ X等级（99.9％），确保我正确地跟随并正确输入了他拥有的东西，但是我的看起来不像他（我已经附加了它的外观和我的外观以及他所拥有的东西。
我的代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/DWstyle.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">
<nav class="navbar navbar-expand-lg navbar-light bg-beige">
<a class="navbar-brand">DW Gift Company</a>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 9</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
我希望它看起来像like。
我的外表like。
我的教授like的样子。
我想这些子弹与李某有关，但我不确定。
Tl; dr：我正在尝试为网站制作HTML导航栏，即使我觉得我已经完全按照他的讲师的在线视频中的代码进行操作，这看起来也不是应该的。
答案 0 :(得分：0)
我不想为您做作业，但是我可以为您指明正确的方向。
https://getbootstrap.com/docs/4.0/components/navbar/
答案 1 :(得分：0)
从这样的CDN路径中包含bootstarp的文件
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
根据您的html代码，您的文件很可能不存在。
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
这两行表示您的css（bootstrap.min.css和bootstrap-theme.css）必须存在于与html平行的名为css的文件夹中。
您应该下载boostrap的css并将它们保存在与您的html文件平行的名为css的文件夹中，或者仅从CDN路径（由引导程序本身托管）访问文件。
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-beige">
<a class="navbar-brand"><img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">DW Gift Company</a>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 9</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
答案 2 :(得分：0)
请尝试使用此代码。我觉得新手很难理解您的代码，如果您真的想了解有关Web开发的更多信息，请学习CSS，而不是直接使用Bootstrap。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">
<a class="navbar-brand">DW Gift Company</a></div>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">item 2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>