Question

我希望.card页脚始终位于div的末尾。我猜这是用Bootstrap 4解决问题的一种更好的方法，比我使用绝对位置所做的更好。

在我尝试解决它之前的外观

https://www.bootply.com/5xw7sfaPLs

<div class="container">
        <div class="row">
            <div class="card-group ">
                <div class="col-md-4 m10">
                    <div class="newsbox">
                        <img src="https://via.placeholder.com/350x150">
                        <div class="card-body ">
                            <h4>What is Lorem Ipsum?</h4>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        </div>
                        <div class="card-footer ">
                            <small class="text-muted ">13 februari, 2019</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 m10">
                    <div class="newsbox">
                        <img src="https://via.placeholder.com/350x150">
                        <div class="card-body ">
                            <h4>What is Lorem Ipsum?</h4>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        </div>
                        <div class="card-footer ">
                            <div class="row">
                                <div class="col-12 ">
                                    <small class="text-muted ">13 februari, 2019</small>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 m10">
                    <div class="newsbox">
                        <img src="https://via.placeholder.com/350x150">

                        <div class="card-body ">
                             <h4>What is Lorem Ipsum?</h4>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="card-footer ">
                            <small class="text-muted ">13 februari, 2019</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

并且具有绝对位置：

启动：https://www.bootply.com/Tv2DWpQx3Q

.newsbox {
    border: 1px solid rgba(0, 0, 0, .125);
    height: 100%;
    position: relative;

}

.card-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 1

您可以使用flexbox来执行此操作，而避免使用position: absolute。

只需添加：

.newsbox {
    display: flex;
    flex-direction: column;
    height: 100%;
}

div底部的页脚，不使用绝对位置

1 个答案: