Question

我正在尝试使用弹性框将div对齐到父div的底部。我希望footer-bottom在每张卡片的底部对齐。我尝试使用align-self: end;，但这可以阻止标题对齐。见js fiddle

我知道bootstrap 4有一种方法可以通过使用默认的卡语法来实现这一点，但我需要在每张卡中包含列，以便它们可以用于移动设备。

有人可以帮我吗？

<div class="mb-4 col-lg-4 normal-article">
        <article class="card">

                <div class="row no-gutters">



                        <div class="col-md-3 col-lg-12 order-12 order-md-1">
                            <div class="mobile-display">
                                <div class="card-img-top thumbnail" style="background-image:url('http://skeleton-theme.local/wp-content/uploads/2017/09/ukmr-_0022_talk-of-the-town-318x179.jpg')">
                                </div>
                                <div class="d-md-none">
                                    <p>Social shifts over the last decade have increased the pressure to live in well connected centres of population. </p>
                                </div>
                            </div>
                        </div>




            <div class="order-1 order-md-12 col-md-9 col-lg-12">


                <div class="card-body">

                <div class="entry-meta">
                    <span class="cat-links"> <a href="http://skeleton-theme.local/category/south-east/" rel="category tag">South East</a></span><span class="d-none edit-link"><a class="post-edit-link" href="http://skeleton-theme.local/wp-admin/post.php?post=3433&#038;action=edit">Edit <span class="screen-reader-text">"Talk of the Town"</span></a></span>             </div>

                <header class="entry-header">

                    <h2 class="entry-title"><a href="http://skeleton-theme.local/talk-of-the-town/" rel="bookmark">Talk of the Town</a></h2>
                </header><!-- .entry-header -->


                </div><!-- .card-body -->


            </div>
                            <div class="order-12 col-12 footer-bottom">
                    <div class="card-footer">
                        <small class="text-muted"><span class="posted-on">Posted on <a href="http://skeleton-theme.local/talk-of-the-town/" rel="bookmark"><time class="entry-date published" datetime="2017-09-14T15:00:44+00:00">14/09/2017</time></a></span></small>
                    </div>
                </div>
                            </div>

        </article>
    </div>

Answer 1

好的，这就是我如何解决这个问题。

将css flex-direction: column;添加到您的.no-gutters css规则
你的no-gutters div有3个孩子。在第一个和第二个孩子上，添加flex: 1;或根据您想要给两个div的比例添加任何值，并在第三个孩子（footer-bottom）上添加flex: 0 auto;

Bootstrap Flexbox将div与div的底部对齐，阻止其他div对齐

1 个答案: