如何使 bootstrap 卡片始终具有相同的尺寸

Question

我正在做一个非常简单的项目来学习 API 对 Angular 的调用，它工作得很好。我的问题来自 HTML 设计。我使用 bootstrap 5 使设计更友好一些，但由于我没有经常使用该库，我仍然发现很难正确使用它的类。我的布局包含一张卡片，其中我打印了一些从 API 调用中收到的文本，以及一个用于打印另一个笑话的按钮。很简单的。我已经为卡片设置了最大高度，它工作正常，但我的问题出在里面的物品上。我正在打印的字符串可以有不同的长度，所以它会移动它下面的按钮，我认为这不是 UI/UX.

的最佳选择

我正在提供一些代码：

HTML

<div class="container justify-content-center align-items-center mt-5">
  <div class="row">
    <div class="card justify-content-center align-items-center">
      <h1 class="m-3">{{ actualJoke }}</h1>
      <button class="btn btn-outline-primary btn-lg m-5 px-5" (click)="getJoke()">Next joke ⏩</button>
    </div>
  </div>
</div>

CSS

.card {
    height: 40vh;
}

我想做的是让按钮始终停留在同一个地方，不管上面容器的大小，但我真的不知道是否可行。

Answer 1

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                        the card's content.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                        the card's content. Some more quick example text for the card's content.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to make up the bulk of the card's content.</p>
                </div>
            </div>
        </div>
    </div>
</div>

试试这个代码。

Answer 2

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card h-100">
                <div class="align-items-start card-body d-flex flex-column">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, pariatur!
                    </p>
                    <button class="btn btn-outline-primary btn-lg m-5 px-5 mt-auto" (click)="getJoke()">Next joke
                        ⏩</button>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <div class="align-items-start card-body d-flex flex-column">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi a in
                        suscipit, aliquam magnam iure, hic earum autem quasi cum deserunt quidem eos quaerat
                        voluptatum.</p>
                    <button class="btn btn-outline-primary btn-lg m-5 px-5 mt-auto" (click)="getJoke()">Next joke
                        ⏩</button>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <div class="align-items-start card-body d-flex flex-column">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus,
                        laudantium!</p>
                    <button class="btn btn-outline-primary btn-lg m-5 px-5 mt-auto" (click)="getJoke()">Next joke
                        ⏩</button>
                </div>
            </div>
        </div>
    </div>
</div>

如果您希望所有按钮都具有相同的尺寸，那么这段代码会很有用，试试这个。

如何使 bootstrap 卡片始终具有相同的尺寸

How to make a bootstrap card to always have the same dimensions

html

css

bootstrap-5