对齐引导卡中文本和按钮旁边的图像

Question

我正在努力实现这一目标， 这是我的代码和结果

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body p-0 d-flex flex-column">
                <div class="row h-100">
                    <div class="col-sm-6">
                        <h5 class="card-title">another product name</h5>
                        <div class="mt-auto"><a href="#" class="btn rounded mt-auto btn-primary">Learn More</a></div>
                    </div>
                    <div class="col-sm-6 text-right"><img src="https://placehold.it/200x120" class="card-img img-fluid" alt="" /></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body p-0 d-flex flex-column">
                <div class="row h-100">
                    <div class="col-sm-6">
                        <h5 class="card-title">product name</h5>
                        <div class="mt-auto"><a href="#" class="btn rounded mt-auto btn-primary">Learn More</a></div>
                    </div>
                    <div class="col-sm-6 text-right"><img src="https://placehold.it/200x120" class="card-img img-fluid" alt="" /></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body p-0 d-flex flex-column">
                <div class="row h-100">
                    <div class="col-sm-6">
                        <h5 class="card-title">long product name that has two lines</h5>
                        <div class="mt-auto"><a href="#" class="btn rounded mt-auto btn-primary">Learn More</a></div>
                    </div>
                    <div class="col-sm-6 text-right"><img src="https://placehold.it/200x120" class="card-img img-fluid" alt="" /></div>
                </div>
            </div>
        </div>
    </div>
</div>

不知道怎么了。 谢谢

Answer 1

如果将margin-top:auto类添加到父容器，则

d-flex flex-column将起作用。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body p-0 d-flex flex-column">
                <div class="row h-100">
                    <div class="col-sm-6 d-flex flex-column">
                        <h5 class="card-title">another product name</h5>
                        <div class="mt-auto"><a href="#" class="btn rounded mt-auto btn-primary">Learn More</a></div>
                    </div>
                    <div class="col-sm-6 text-right"><img src="https://placehold.it/200x120" class="card-img img-fluid" alt="" /></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body p-0 d-flex flex-column">
                <div class="row h-100">
                    <div class="col-sm-6 d-flex flex-column">
                        <h5 class="card-title">product name</h5>
                        <div class="mt-auto"><a href="#" class="btn rounded mt-auto btn-primary">Learn More</a></div>
                    </div>
                    <div class="col-sm-6 text-right"><img src="https://placehold.it/200x120" class="card-img img-fluid" alt="" /></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body p-0 d-flex flex-column">
                <div class="row h-100">
                    <div class="col-sm-6 d-flex flex-column">
                        <h5 class="card-title">long product name that has two lines</h5>
                        <div class="mt-auto"><a href="#" class="btn rounded mt-auto btn-primary">Learn More</a></div>
                    </div>
                    <div class="col-sm-6 text-right"><img src="https://placehold.it/200x120" class="card-img img-fluid" alt="" /></div>
                </div>
            </div>
        </div>
    </div>
</div>