某些 Bootstrap 4 类在我的 Angular 8 项目中不起作用答案

【问题标题】：Some Bootstrap 4 classes don't work in my Angular 8 project某些 Bootstrap 4 类在我的 Angular 8 项目中不起作用
【发布时间】：2019-12-24 04:59:59
【问题描述】：

我正在创建一个标题，其中元素应该彼此相邻，但只有一个元素出现在浏览器中而其他元素没有出现，我为它们编写了代码。

我得出的结论是，问题在于我正在使用的引导类，因为当我检查浏览器中的元素时，它们显示为灰色，如下所示：我使用的是 Bootstrap 4，我的浏览器是 Firefox，我不是 Angular 方面的专家，所以请体谅。

这是我的 HTML 代码

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">Recipe Book</a>
    </div>

    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Recipes</a></li>
            <li><a href="#">Shopping List</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" role="button">Manage</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Save Data</a></li>
                    <li><a href="#">Fetch Data</a></li>
                </ul>
            </li>
        </ul>
    </div>
  </div>
</nav>

我添加了 Bootstrap，方法是使用 npm 安装它，然后将其添加到 angular.json 文件中

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

【问题讨论】：

这可能是因为您没有在导航栏中的项目中添加必要的nav-item 类：getbootstrap.com/docs/4.3/components/navbar
我添加了你指出的类，但是没有用。
尝试添加一个更简单的引导组件。例如：看看它是否连接到引导程序。如果是这样，它与导航有关。如果它不是bootstrap'ish，那么它与angular.json有关
我尝试了按钮示例，它出现在浏览器中，所以我猜是导航的问题
hmm 我在胡闹，决定删除collapse 类，出现了那个div 里面的项目，但是在Recipe Book 标题下，像这样：ibb.co/bKZmvkV 这里使用collapse 类的要点是项目最终彼此相邻，是否有另一种使用折叠的方法？

标签： html css angular bootstrap-4 angular8

【解决方案1】：

好的，所以我修复了项目标题中发生的任何事情。所以，事实证明我不需要使用这些类：navbar-default、navbar-header、collapse、navbar-collapse 和 nav。相反，我添加了这些类：navbar-expand-sm、bg-light、navbar-light、nav-item、nav-link。代码变成了这样：

<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">

    <a href="#" class="navbar-brand">Recipe Book</a>

    <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">Recipes</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Shopping List</a></li>
    </ul>

    <ul class="navbar-nav navbar-right">
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" role="button">Manage</a>
            <ul class="dropdown-menu">
                <li class="nav-item"><a href="#">Save Data</a></li>
                <li class="nav-item"><a href="#">Fetch Data</a></li>
            </ul>
        </li>
    </ul>

  </div>
</nav>

我读过the usage of the bootstrap navbar by w3schools 这个项目到目前为止的样子，标题看起来几乎和导师的一模一样，但我对它很满意。很抱歉给您带来麻烦，并感谢您的洞察力。

【讨论】：