Question

我已经尝试了几个小时，以了解这里发生的事情，但是我没有设法了解。我已经为导航栏编写了html主体，如下所示。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-inverse">
  <div class = "container-fluid">

    <div class = "navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
   </button>
      <a href="#" class="navbar-brand">Segmentation Folks</a>
</div>

<div class = "collapse navbar-collapse" id="navHeaderCollapse">
  <ul class = "nav navbar-nav">
    <li style="text-align: center;"><a href ="#">Home</a></li>
    <li style="text-align: center;"><a href ="#">About</a></li>   
    <li style="text-align: center;"><a href ="#">Contact</a></li>
    <li style="text-align: center;"><a href ="#">Sign in</a></li>
    <li style="text-align: center;"><a href ="#">Sign up</a></li>
  </ul>
</div>
</div>
</nav>

当我从计算机中打开html文件时，they all seem to be as I want.

但是当我将html主体复制为Angular组件时，the result is this。另外，当屏幕较小时，切换按钮不起作用，而在html中则起作用。

您知道为什么会这样吗？谢谢！

编辑！ 我已经安装了bootstrap 3.3.6，并且已经从该html中删除了脚本和链接。然后，我将index.html包含在以下内容中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

看来现在可以了！

Answer 1

相反，使用链接使用cli to install bootstrap。

但是要安装 3.3.6 ，请使用以下命令：

npm install bootstrap@3.3.6

Here is working code

编辑使用角度进行折叠工作

添加ts

collapsed:boolean=true;

html

<nav class="navbar navbar-inverse">
  <div class = "container-fluid">

<div class = "navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse" (click)="collapsed = !collapsed;">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
   </button>
      <a href="#" class="navbar-brand">Segmentation Folks</a>
</div>

<div class = "collapse navbar-collapse" id="navHeaderCollapse" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
  <ul class = "nav navbar-nav">
    <li style="text-align: center;"><a href ="#">Home</a></li>
    <li style="text-align: center;"><a href ="#">About</a></li>   
    <li style="text-align: center;"><a href ="#">Contact</a></li>
    <li style="text-align: center;"><a href ="#">Sign in</a></li>
    <li style="text-align: center;"><a href ="#">Sign up</a></li>
  </ul>
</div>
</div>
</nav>

Angular7组件显示不正确（并且切换不起作用）

1 个答案: