引导面板无法显示，但导航栏和页脚在Angular4应用中正常工作？

Question

So I have an angular4 app I'm building with an app.component.html that looks like this:

 <app-nav></app-nav> <div class="container"> <div class="panel panel-primary"> <div class="panel-heading"> TEST HEAD </div> </div> </div> <app-footer></app-footer> 

The nav.component.html looks like this:

 <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top"> <a class="navbar-brand" href="#">Welcome!</a> <ul class="nav navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" routerLink="home" [routerLinkActive]="['active']"> Home <!--<span class="sr-only">(current)</span>--> </a> </li> <li class="nav-item"> <a class="nav-link" routerLink="contact" [routerLinkActive]="['active']"> Contact </a> </li> </ul> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="https://twitter.com/dril" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="https://github.com/dril" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a> </li> </ul> </nav> <router-outlet></router-outlet> 

And a footer.component.html that looks like this:

 <footer class="footer"> <div class="container"> <span class="text-muted"> Footer </span> </div> </footer> 

As you can see, I'm using bootstrap and font-awesome to style everything, in addition to a global styles.css that looks like this:

 html { position: relative; min-height: 100%; } body { padding-top: 5rem; } .starter-template { padding: 3rem 1.5rem; text-align: center; } 

The nav and footer components are styling correctly. However, the panel styles do not seem to be applying in the main app.component.html or anywhere else I'm testing panels.

What gives?

Answer 1

You tagged bootstrap 4. If you really use bootstrap 4, it's normal that panel class doesnt have a style because for bootstrap 4 you should use card to make a panel style : https://v4-alpha.getbootstrap.com/components/card/

Should be:

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>