Question

所以我有一个angular4应用程序，我正在使用app.component.html构建，如下所示：

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

nav.component.html看起来像这样：

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

和footer.component.html看起来像这样：

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

正如你所看到的，除了看起来像这样的全局styles.css之外，我还使用bootstrap和font-awesome来设置所有内容的样式：

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

导航和页脚组件正确定型。但是，panel样式似乎不适用于主app.component.html或我测试面板的任何其他位置。

是什么给出了？

Answer 1

你标记了bootstrap 4.如果你真的使用bootstrap 4，那么面板类没有样式是正常的，因为对于bootstrap 4你应该使用card来制作面板样式：https://v4-alpha.getbootstrap.com/components/card/

应该是：

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

Bootstrap面板无法显示但导航栏和页脚在Angular4应用程序中工作？

1 个答案: