HTML/CSS/引导程序 |引导导航栏答案

【问题标题】：HTML/CSS/Bootstrap | Bootstrap NavbarHTML/CSS/引导程序 |引导导航栏
【发布时间】：2018-06-30 02:03:29
【问题描述】：

我对编程很陌生，对 HTML 也很陌生。目前正在为我的 Web 开发课程做课堂作业，我们正在为一家名为“DW Gift Company”的虚构公司制作网页。项目要求之一是顶部的导航栏（不固定），它通向几个不同的子页面（关于、项目、订单等）。但是，我被困在导航栏部分，似乎无法让导航栏看起来正确。

下面是我的代码。我有导航标签，我很确定是正确的类以及 ul 和 li（我知道 ul 是一个无序列表，但我不能 100% 确定 li 是什么。我正在关注来自我的教授的在线视频，我是 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 导航栏，但它看起来不像应该的那样，尽管我觉得我完全按照他的在线视频中的导师代码进行操作。

【问题讨论】：

您是否检查过您的引导程序的 css 是否已加载到页面上？检查您的控制台是否有任何错误
尝试像这样包含引导程序的 css stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/…" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
嗨！你建议的代码看起来就像一个魅力，但你介意解释一下它到底做了什么吗？
回答了您的问题

标签： html css bootstrap-4 navbar adobe-brackets

【解决方案1】：

试试这个代码。我觉得你的代码对于新手来说有点难以理解，如果你真的想了解更多关于 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>

【讨论】：

将您的评论移至答案

【解决方案2】：

像这样从它的 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 路径（由 bootstrap 本身托管）访问文件。

<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>

【讨论】：

【解决方案3】：

我不想为你做作业，但我可以为你指明正确的方向。

如果您使用的是 Bootstrap 4，请查看此页面

https://getbootstrap.com/docs/4.0/components/navbar/

如果您使用的是 Bootstrap 3，请查看此页面

https://getbootstrap.com/docs/3.3/examples/navbar/

【讨论】：

谢谢伙计。并不是关于我们在课堂上学到了什么的问题，我得到的主要是关于为什么它不能在后台工作（Nandita 回答），这在课堂上没有涉及。再次感谢您的链接:)