html - 两个 Bootstrap 卡体的水平对齐

Question

我在对齐 Bootstrap 卡片正文时遇到问题 - 将按钮和文本放在卡片中以使它们处于相同高度。

这是错误的

        <div class="card mb-4 shadow-sm d-inline-block">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">A</h4>
            </div>
            <div class="card-body">
                <span>
                    One line text
                </span>
                <h1 class="mt-3 card-title pricing-card-title">€0</h1>
                <ul class="list-unstyled mt-3 mb-4">

                    <li><i class="fas fa-check"></i> Web page</li>
                    <li class="mb-2"><i class="fas fa-sync"></i> AAA</li>

                    <li><i class="fas fa-check"></i> XXX</li>
                    <li><i class="fas fa-check"></i> CCC</li>

                </ul>
                <small class="text-muted">
                    * - Revisions are how many times you can request a change of something, you can read more at <a href="revision-policy">revision policy</a>
                </small>
                <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
            </div>
        </div>

        <div class="card mb-4 shadow-sm d-inline-block">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">H</h4>
            </div>
            <div class="card-body">
                <span>
                    Two line text Two line text Two line text Two line text Two line text 
                </span>
                <h1 class="mt-3 card-title pricing-card-title">€0</h1>
                <ul class="list-unstyled mt-3 mb-4">

                    <li><i class="fas fa-check"></i> Web page</li>
                    <li class="mb-2"><i class="fas fa-sync"></i> JJJ</li>

                    <li><i class="fas fa-check"></i> XXX</li>
                    <li><i class="fas fa-check"></i> CCC</li>

                </ul>
                <small class="text-muted">
                    * - Revisions are how many times you can request a change of something, you can read more at <a href="revision-policy">revision policy</a>
                </small>
                <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
            </div>
        </div>

这是 JSFiddle 链接，因此您可以查看整个代码等。JSFiddle

Answer 1

试试这个

两张卡片的区别在于卡片顶部的文字。一张卡片是一行文字，另一张卡片是两行文字。所以，在第一张卡片中删除一行文本并将其更改为

'''

<p class="card-text mb-1">One line text</p>

'''

所以文本是一样的，但在底部它需要一个行边距，并且会在一行后开始美元文本，所以每一行都会向下对齐并可能得到正确的对齐方式