html - Angular 渲染不必要的空间

我有一个成员组件，其中包含所有单个成员组件。

如果我将成员组件使用为静态，如下所示，则不会发生问题

<div class="row bg-light justify-content-center py-4">
  <div class="col-lg-8">
    <h3 class="font-weight-light pb-2">Members</h3>
    <div class="row">
<!-- Repeating div -->
      <div class="col-12 col-md-4 col-lg-3 p-2">
        <div class="card px-0 ">
          <img class="card-img-top" src="https://i1.sndcdn.com/avatars-000495007683-zg65ko-t500x500.jpg" alt="Card image cap">
          <div class="card-body p-2 text-center">
            <h5 class="card-title mb-1">Name Surname</h5>
            <p class="card-text mb-1">Title</p>
            <a href="#"><span class="ion ion-logo-linkedin text-dark mx-1 h3"></span></a>
            <a href="#"><span class="ion ion-logo-github text-dark mx-1 h3"></span></a>
            <a href="#"><span class="ion ion-logo-twitter text-dark mx-1 h3"></span></a>
          </div>
        </div>
      </div>
<!-- Repeating div -->
    </div>
  </div>
</div>

但是，如果我使用重复div作为组件，则会出现问题

<div class="row bg-light justify-content-center py-4">
  <div class="col-lg-8">
    <h3 class="font-weight-light pb-2">Members</h3>
    <div class="row">

      <app-member></app-member>
      <app-member></app-member>
      <app-member></app-member>

    </div>
  </div>
</div>

我不知道为什么会这样

最佳答案

您可以使用：

<app-member style="display: contents;"></app-member>

但是并非所有浏览器都支持。

您还可以使用：

<app-member class="col-12 col-md-4 col-lg-3 p-2"></app-member>

当然，您应该在组件中删除此类

关于html - Angular 渲染不必要的空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58271654/