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块之一中使用了.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>