Bootstrap4 align-self-baseline 不起作用答案

【问题标题】：Bootstrap4 align-self-baseline doesn't workBootstrap4 align-self-baseline 不起作用
【发布时间】：2018-04-06 00:04:48
【问题描述】：

在这里，我试图将标签按钮粘贴到父 div 的 baseline 上。如果这不是一种合适的方法，您能否推荐其他方法？

<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>

【问题讨论】：

标签： javascript html css flexbox bootstrap-4

【解决方案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>

【讨论】：