时间戳

首页 > 解决方案 > Bootstrap flexbox 自对齐类无法正常工作

html - Bootstrap flexbox 自对齐类无法正常工作

问题描述

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

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>

标签： htmlcssbootstrap-4flexbox

解决方案

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

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

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

推荐阅读