Question

这里我试图将标记按钮粘贴到父baseline的{{1}}。如果这不是一个合适的方法，你可以建议其他的吗？

div

Answer 1

这是身高问题。 row应为height:100%。使用align-self-end作为列的底部，相对于相邻列。使用align-self-end基线作为相对于相邻列的交叉轴。

https://www.codeply.com/go/k372k4H7Ze

<div class="container">
    <div class="row">
        <div class="col-12 mb-4">
            <div class="card bg-light">
                <div class="card-body">
                    <div class="row h-100">
                        <div class="col-md-7 blog-card-doc">
                            <div class="row h-100">
                                <div class="col-md-12">
                                    <a class="h3" href="#">Blog Post</a>
                                    <p>
                                        <i class="small">2018-03-05</i>
                                    </p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt nulla nec mi aliquet, commodo laoreet nisi placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam id finibus est.</p>
                                </div>
                                <footer class="col-md-12 blog-card-tags align-self-end">
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a class="btn btn-sm btn-outline-success" href="#">blog-tag</a>
                                    </div>
                                </footer>
                            </div>
                        </div>
                        <div class="col-md-5 text-center">
                            <a href="#">
                                <img height="300" src="http://via.placeholder.com/300x300" width="300">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap4 align-self-baseline不起作用

1 个答案: