html - Angular 渲染不必要的空间

Question

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

如果我将成员组件用作如下所示的静态，则不会出现问题

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

我不明白为什么会这样

Answer 1

你可以使用:

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

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

您还可以使用:

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

当然你应该在组件中删除这个类