twitter-bootstrap - Bootstrap 4 的媒体对象对齐(Flexbox)

Question

我不太熟悉 Flexbox，所以我似乎无法将用户的头像与文本左侧对齐:

---

我正在尝试实现这种布局:

将 media-body 设置为 flex-shrink 无效。

那么我该如何解决这个问题呢？谢谢!

HTML:

<div class="single-review text-center">
                <i class="icon ion-md-quote quote-icon"></i>
                <p class="client-review">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis sit explicabo eius eum officia. Neque similique repellat saepe repudiandae laboriosam dicta, earum placeat quasi at, sunt ratione! Aliquid.</p>
                <div class="media justify-content-center">
                  <img src="https://i1.wp.com/ecell.sfitengg.org/wp-content/uploads/2016/06/Dummy-image.jpg" alt="Client" class="img-fluid rounded-circle client-avatar">
                  <div class="media-body">
                    <h6 class="client-name">John Doe</h6>
                    <span class="client-role">Web Developer</span>
                  </div>
                </div>
</div>

CSS:

.single-review {
    .quote-icon {
        font-size: 42px;
        color: #777;
    }
    .client-avatar {
        width: 50px;
        margin-bottom: 23px;
    }
    .client-review {
        margin-bottom: 23px;
        font-weight: 400;
        color: #666;
    }
    .client-name {
        margin-bottom: 0;
        font-weight: 700;
        font-size: 16px;
        color: #555;
    }
    .client-role {
        display: inline-block;
        font-size: 12px;
        color: #888;
        font-weight: 600;
    }
}

现场演示:https://jsfiddle.net/pcwudrmc/40830

Answer 1

定位可能不起作用，因为您在其中一个 div block 中使用了 .media-body 类。

  <div class="single-review text-center">
    <i class="icon ion-md-quote quote-icon"></i>
    <p class="client-review">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis sit explicabo eius eum officia. Neque similique
        repellat saepe repudiandae laboriosam dicta, earum placeat quasi at, sunt ratione! Aliquid.</p>
    <div class="flex-row">
        <div class="media justify-content-center">
            <img src="https://i1.wp.com/ecell.sfitengg.org/wp-content/uploads/2016/06/Dummy-image.jpg" alt="Client"
                class="img-fluid rounded-circle client-avatar">
            <div>
                <h6 class="client-name">John Doe</h6>
                <span class="client-role">Web Developer</span>
            </div>
        </div>
    </div>