Bootstrap flexbox 自对齐类无法正常工作答案

【问题标题】：Bootstrap flexbox self-align class doesn't work properlyBootstrap flexbox 自对齐类无法正常工作
【发布时间】：2020-11-01 10:05:37
【问题描述】：

我正在尝试使用引导程序创建博客文章布局。我正在尝试将我的博客图片放在左侧，将标题放在右侧，将作者姓名放在标题底部。但它不起作用。作者文本位于右侧。

https://i.stack.imgur.com/X0CZ5.jpg

我的代码是：

        <div class="blog">
            <div class="row">
                <div class="col-md-6 d-flex align-items-center">
                    <img src="images/photo/blog-1.png" alt="">
                    <h4>13 of My Favorite UI/UX Goodies</h4>
                    <p class="flex-column align-self-end">By <span>Danny Sapio</span></p>
                </div>
            </div>
        </div>

【问题讨论】：

标签： html css bootstrap-4 flexbox

【解决方案1】：

您需要创建两列来显示信息。试试这个：

<div class="blog">
    <div class="row">
         <div class="col-md-6 d-flex align-items-center">
              <img src="images/photo/blog-1.png" alt="">
         </div>
         <div class="col-md-6 d-flex align-items-center">
               <h4>13 of My Favorite UI/UX Goodies</h4>
               <p class="flex-column align-self-end">By <span>Danny Sapio</span></p>
         </div>
    </div>
</div>

试一试，看看你是否得到了你想要的结果。

【讨论】：