javascript - Bootstrap4 对齐 self 基线不起作用

Question

在这里，我试图将标记按钮粘贴到父 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>

Answer 1

这是高度问题。 行应该是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>