在Bootstrap 4中正确包装图像下的文本的方法？

Question

使用Bootstrap 4 alpha 6，我想展示一份见证，包括：

• 左侧：人物照片
• 右侧：引号，姓名和公司徽标（左对齐）

即平板电脑和桌面宽度。 但是，当窗口宽度缩小时，我想要叠加该集合，以使图像在文本集的顶部上，并且每个部分都成为中心对齐。

目前，这是我的代码......

<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
  <div class="container">
    <div class="media">
      <img class="d-flex mr-4 rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      <div class="media-body">
        <p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#">link</i></a></p>
        <h2 class="mt-0">Joe Smith</h2>
        <img src="http://placehold.it/150x40" class="img-fluid" width="150">
      </div>
    </div>
  </div>
</div>

这在桌面宽度上成功产生了以下结果......

然而，当缩小时，安排看起来像这样......

相反，我希望图像在顶部，而不是被包裹，最好是居中。下面的文字最好以中心为准。

该代码是媒体对象。

我也试过用两列来完成这个 - 一个是宽度2，另一个是10 ......

<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
  <div class="container">
    <div class="row">
      <div class="col-md-2 text-center">
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>
      <div class="col-md-10 text-center">
        <p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#" target="_blank"><i class="material-icons md-inverse pmd-sm">link</i></a></p>
        <h2 class="mt-0">Joe Smith</h2>
        <img src="http://placehold.it/150x40" class="img-fluid" width="150">
      </div>
    </div>
  </div>
</div>

...这成功地在移动宽度上产生了正确的结果......

......但是， a）我不确定这个加价是否正确，并且 b）这意味着文本甚至在桌面宽度上居中，这是不合适的......

我对正确的方法感到困惑，是否/何时应该使用img-fluid与固定宽度的图像等。我可以根据浏览器宽度/断点对文本进行不同的对齐吗？

d-flex / mr-auto的东西，我不喜欢。这是从媒体对象的Bootstrap 4文档代码中复制的。

要走的路是什么？

Answer 1

＆＃34;正确＆＃34;方法是主观的，但您可以使用响应实用程序来更改不同断点处的文本对齐方式。 text-md-left会将项目左对齐放在较大的屏幕上，然后使用text-center以较小的屏幕为中心。

<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
  <div class="container">
    <div class="row">
      <div class="col-md-2 text-md-left text-center">
        <img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
      </div>
      <div class="col-md-10 text-md-left text-center">
        <p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <a href="#" target="_blank"><i class="material-icons md-inverse pmd-sm">link</i></a></p>
        <h2 class="mt-0">Joe Smith</h2>
        <img src="http://placehold.it/150x40" class="img-fluid" width="150">
      </div>
    </div>
  </div>
</div>

http://www.codeply.com/go/tuTd2OiZFx