Javascript 下载引导程序'；仅适用于导航栏

我试图使用引导框架，但只用于导航栏。我有一个客户的菜单上有很多下拉菜单，所以我认为使用引导是最简单的方法。当我尝试只下载所需的CSS/JS/jquery组件时（我使用了多年前针对同一问题的堆栈溢出响应中的教程），但当我下载时，一些CSS样式丢失了。JS功能可以正常工作，但是导航链接（具有nav link和nav item之类的类名）没有正确的样式，布局看起来很糟糕。好像我遗漏了什么。我假设它与alpha和beta版本有关，但我不确定？任何建议都是很好的，因为我觉得仅仅为了导航栏而覆盖所有这些引导样式是不可持续的

编辑：我添加了屏幕截图，以证明我确实研究过这个问题，并尝试了多种方法才接触到这里。我已经编写了一年多的代码，以前从未在这里发布过问题，很抱歉添加了这么多截图

---

如果您想要导航栏，请仅使用以下选项：

html:
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
          <a class="navbar-brand" href="#">Start Bootstrap</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">name of link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">name of link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">name of link</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
js:
<script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

html：










js:

我最终弄明白了这一点。问题是Bootstrap没有为Bootstrap 4提供定制的编译文件，只为3.4提供。在3.4和4之间，像.nav-link和.nav-item这样的类的样式设置方式一定发生了变化，这导致代码中断。因此，为了从我已经构建的bootstrap4中保留导航栏的代码，我列出了所有的类和ID名称，检查了bootstrap4的主CSS，并提取了所有相应的类。为了组织起见，我将它们放在一个单独的CSS文件中。然后，我删除了CDN，将我创建的新CSS文件与用于导航的类链接起来，并确保包含最新的引导JS CDN（我使用了它们的链接，不需要搜索所有的JS）

---

今天晚些时候，我将在我的解决方案中添加一个codepen链接，因为我想，在尝试仅为导航栏隔离Boostrap的CSS时，我并不是唯一遇到此问题的人。

您是否有指向bootstrap CSS文件的正确url，无论是异地还是现场？尝试将此文件添加到html中的

（你在inspector中有任何控制台错误吗？）我想可能我在我的原始帖子中不清楚，因此所有的否决票：/抱歉。。。当我直接链接到Bootstrap框架时，它确实起作用。我想做的是只提取导航栏的代码，因为我不需要整个引导框架。当我使用CDN链接时，它可以工作，但当我试图从引导程序下载代码时，仅使用导航栏所需的CSS、JS和组件，它就坏了。几年前，可以从网站下载引导程序的子集，您可以勾选所需的组件（）。他们现在已经移除了这个。您可以通过下载源文件（）而不是编译文件来编译css的子集，并从文件/scss/bootstrap.scss中编辑出您不需要的所有内容，然后使用其中一个npm脚本（）运行编译过程。这并不能解决css问题。我猜她必须自己编译她的cherrypicked CSS，这就是为什么它不能开箱即用的原因。这是她最后做的，但她是手工做的。