我怎样才能让卡片在彼此的右侧和左侧堆叠？

Question

我必须制作一张带有一些文字和图像的卡片并将其存储为一个组件，然后我必须在 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>

这是我的 SCSS 代码：

@import "../../styles";

.card{text-align: center;
    

    &-title{font: 32px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    }

    &-text{font: 16px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    }

    &-img{border-radius: 100%;
    width: 140px;
    }
}

Answer 1

您可以将 bootstrap 与 col-md、col-lg... 和 bootstrap 的网格一起使用

Answer 2

您可以使用card-group 或card-deck 进行水平卡片对齐。

card-group 是卡片之间没有空格。

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

Answer 3

简单。只需使用样式

显示：弹性

在.card-deck 元素上方的父级上。 默认情况下，它们会排成一排。