垂直显示内容的导航栏

Question

我是 Angular 的新手。我已经开始构建一个应用程序，这是我的导航栏代码。导航栏未按预期显示，内容垂直打印。

我的 header.component.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 <span class="caret"></span></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>

这是我的网页：-

食谱书食谱购物清单

管理保存数据获取数据

所有这些都打印为垂直链接（无法在此处显示）很好，但是水平导航栏在哪里？

Answer 1

正确安装 bootstrap 并在您的 angular .json 添加

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

并根据您的要求查看 Stackblitz

垂直显示内容的导航栏

navbar displaying content vertically

navbar

angular

angular8