Html 如何查看导航栏中的按钮？

我目前正在编写我的第一个django网站，我被navbar困住了。我从引导程序下载了一个导航条，就像这个。 但是，当我运行服务器时，导航栏是这样的

我想看看导航栏上的按钮

代码如下：

  <nav class="navbar fixed-top navbar-light" style='background-color: snow;'>
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </nav>
  </nav>

---

我认为您使用了错误的代码来创建导航栏 navbar折叠类用于创建带有汉堡包菜单的导航

参考此

请记住在完整页面视图中打开

文件






添加学生


添加通知


注销

试试这个

您在html中关闭了两次

的一个无效html

您可以将代码与

如果要折叠菜单，请添加

导航栏展开lg

---

如果您想在桌面视图中看到按钮，可以使用此最新的引导响应导航条形码。它仍然会折叠为一个汉堡包图标折叠菜单，在较小的屏幕中没有可见的按钮（如果单击汉堡包图标切换，它会显示按钮）

---

要使用的代码笔：

正如@Firoz Rangrez之前所说，从Boostrap可以下载很多预先设计好的对象，可能是下载了一个折叠的导航条代码。我非常推荐您使用纯css和js（您编写自己的代码，并且更好地理解它的工作原理），否则，您可以查看此链接

---

希望您觉得它有用。

单击菜单时是否会切换？您的屏幕截图显示了引导导航栏的

折叠布局，其中不包括图标。我将发布一个答案，为您指出正确的方向。感谢您分享问题的答案；考虑用一个完整的代码解决方案来更新你的答案，它解决了OP的问题，而不仅仅是一个链接。我已经添加了你可以参考的代码来添加按钮。如果您有任何查询，请删除注释。我很高兴帮助你感谢你分享了这个问题的答案；OP特别询问了引导导航栏的问题。另外，在回答一个问题时，请考虑张贴一个完整的代码答案，看看我的答案的想法。您也可以在这里阅读有关最佳实践的内容来回答问题：谢谢，我看不出背景颜色如何导致HTML元素不显示？

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Home</a>
            <a href="#" class="nav-item nav-link">Profile</a>
            <a href="#" class="nav-item nav-link">Messages</a>
            <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
        </div>
        <div class="navbar-nav ml-auto">
            <a href="#" class="nav-item nav-link">Login</a>
        </div>
    </div>
</nav>