html - 某些 Bootstrap 4 类在我的 Angular 8 元素中不起作用

Question

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

我得出的结论是问题出在我使用的 Bootstrap 类上，因为当我检查浏览器中的元素时，它们显示为灰色，如下所示: 我使用的是 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>

我通过使用 npm 安装它来添加 Bootstrap，然后将其添加到 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"
]

Answer 1

好的，所以我修复了元素 header 中发生的一切。所以，事实证明我不需要使用这些类: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 到目前为止，元素看起来是这样的，页眉看起来几乎和讲师的一模一样，但我对此很满意。抱歉给您带来麻烦，感谢您的洞察力。