Question

我正在创建一个标头，其中的元素应该彼此相邻，但是浏览器中仅出现一个元素，而其他元素则不出现，我为它们编写了代码。

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

好的，所以我修复了项目标头中发生的一切。因此，事实证明，我不需要使用以下类：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 到目前为止，该项目的外观是如此，标题看起来几乎与教师的完全一样，但我对此感到满意。很抱歉给您带来麻烦，感谢您的见解。

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

1 个答案: