某些引导功能无法在angular 6项目中完全发挥作用

Question

我使用了this教程将引导程序添加到了新创建的angular 6项目中。

编译没有错误（无论在ng console中还是在浏览器的开发人员工具中均如此）。

它似乎在起作用，因为按钮颜色很好。但是与原始代码相比，我的是不同的。

我将此代码复制到了我的应用程序中。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="container">
  <h2>Button Styles</h2>
  <button type="button" class="btn">Basic</button>
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-link">Link</button>      
</div>

但是我在应用程序中得到的是：

我真的不知道这里缺少什么。有什么想法吗？

Answer 1

摘要中的结果呈现了带有空格字符的按钮，而您的按钮则没有。

我建议您插入空白作为html代码。像这样：

<button type="button" class="btn">Basic</button>&nbsp;
<button type="button" class="btn btn-default">Default</button>&nbsp;
....

Answer 2

尝试使用npm安装Bootstrap，而不是将其导入html。

npm install bootstrap