Bootstrap 4 的媒体对象对齐（Flexbox）答案

【问题标题】：Bootstrap 4's Media object aligning (Flexbox)Bootstrap 4 的媒体对象对齐（Flexbox）
【发布时间】：2018-08-17 17:55:55
【问题描述】：

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

【问题讨论】：

标签： twitter-bootstrap css flexbox bootstrap-4

【解决方案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>

【讨论】：