一些自举功能无法在Angle 6项目中完全正常工作

Question

I used this tutorial to add bootstrap to my newly created angular 6 project.

There is no error on compilation (neither in ng console nor in developer tool of browser).

It seem to be working because button are well colored. But compare to original code, mine is different.

I copied this code in my application.

 <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> 

But what I get in my application is this:

I really don't know what is missing here. Any idea ?

Answer 1

The result in the snippet rendered buttons with white space characters and yours didn't.

I recommend you insert white space as html code. like this:

<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