Question

我对使用Angular有疑问。我需要将句子彼此相邻放置。这是我创建的两个不同的组件。我想要食谱清单作品和食谱细节作品，并且这两个句子应该并排显示

<div class="row">
  <div class="col-md-5 ">
    <app-recipe-list></app-recipe-list>
  </div>
  <div class="col-md-7">
    <app-recipes-details></app-recipes-details>
  </div>
</div>

<p>recipe-list works!</p> <p>recipes-details works!</p>

Answer 1

问题是，这里的组件占据了整个窗口的宽度。因此，首先，将类直接应用于组件：

<div class="row">
  <app-recipe-list class="col-5"></app-recipe-list>
  <app-recipes-details class="col-7"></app-recipes-details>
</div>

还要给他们样式display: inline-block;。最好的方法是将:host伪类应用于组件的CSS（recipe-list.component.css和配方-details.component.css）：

:host {
  display: inline-block;
}

组件彼此相邻

1 个答案: