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

Question

I am creating a header where the elements are supposed to be next to each other, but just one element appears in the browser and the others don't, and I wrote the code for them.

I came to the conclusion that the problem is the bootstrap classes I am using because when I inspected the elements in the browser, they appeared gray, like this: I am using Bootstrap 4, my browser is Firefox and I am not an expert in Angular, so please be considerate.

This is my HTML code

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

And I added Bootstrap by installing it with npm and then adding this in the angular.json file

"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

Ok, so I fixed whatever was going on in my project's header. So, it turned out I didn't need to use these classes: navbar-default, navbar-header, collapse, navbar-collapse, and nav. Instead, i added these classes: navbar-expand-sm, bg-light, navbar-light, nav-item, nav-link. The code turned out like this:

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

I read the usage of the bootstrap navbar by w3schools This how the project looks so far, the header looks almost exactly like the instructor's, but I am satisfied with it. Sorry for the trouble, and thanks for the insight.