Html 如何使卡片堆叠在彼此的右侧和左侧？

我必须制作一张卡片，上面有一些单词和图像，并将其存储为一个组件，然后我必须在

app.component.html

上调用该组件3次，以便在网站上显示其中3张卡片。现在这些卡片垂直堆叠在一起。如何使它们水平对齐

这是我的密码：

<div class="card" style="width: 18rem;">
    <img class="card-img" src="assets/grey.jpg" alt="Grey backgroud">
    <div class="card-body">
      <h5 class="card-title">Heading</h5>
      <p class="card-text">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
      <a href="#" class="btn btn-secondary">View details »</a>
    </div>
  </div>

---

您可以将引导与col md、col lg。。。引导的网格

您可以使用

卡组

或

卡组

进行水平卡对齐

卡片组是指卡片之间没有空格

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">...</h5>
      <p class="card-text">...</p>
      <p class="card-text">...</p>
    </div>
  </div>
</div>

...

或者给卡片组分配相等的卡片间距

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">...</h5>
      <p class="card-text">...</p>
      <p class="card-text">...</p>
    </div>
  </div>
</div>

...

简单。只需使用样式

显示器：flex

在上面的父级

.card-deck

元素上。

---

默认情况下，它们会排成一行。

实际上它不起作用……我知道它可以在html css和javascript上工作，但我仍在寻找一种方法使其在Angular中工作尝试以下方法：

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">...</h5>
      <p class="card-text">...</p>
      <p class="card-text">...</p>
    </div>
  </div>
</div>