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

或卡片组在卡片之间具有相等的空间。

  Table A

   Session       Guesses     Correct_letter_in_correct_position     Correct letter_in_wrong_position
      1             ABDC                    2                                        2
      1             ABCF                    3                                        0
      1             BAFD                    1                                        2
      2             EFGD                    3                                        0
      2             EFHG                    2                                        2
      2             EFGI                    3                                        0

Answer 3

容易。只需使用样式

显示：flex

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

如何使卡片彼此左右堆叠？

3 个答案: