Question

我尝试在我的angular 8项目上使用bootstrap crash navbar-collapse功能，但是在编译之后，它没有显示正确的输出。我已经安装： 引导程序-4.3.1 并在 angular.json 文件中进行更改。 jquery 也安装在我的角度项目中这是我尝试实现的引导程序片段。

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>
<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="#">Shoppimg List</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">

        <li class="dropdown">
          <a href="#" class="dropdown-toggle">Manage</a>
          <ul class="dropdown-menu">
            <li><a href="#">Saving Data</a></li>
            <li><a href="#">Fetching Data</a></li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>

需要指导

Answer 1

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">Recipe Book</a>
    </div>

    <ul class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">Recipes</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Shopping List</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" id="navbardrop">Manage</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Save Data</a>
                <a href="#" class="dropdown-item">Fatch Data</a>
            </div>
        </li>
    </ul>
</div>

Bootstrap崩溃导航栏崩溃不适用于Angular 8

1 个答案: