Bootstrap4 align-self-baseline不起作用

Question

在这里，我试图将标签按钮贴在父母baseline的div上。如果这不是一个合适的方法，你能建议另一个吗？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
    <div class="row">
        <div class="col-12 mb-4">
            <div class="card bg-light">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-7 blog-card-doc">
                            <div class="row d-flex ">
                                <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-baseline">
                                    <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>

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>