在 Bootstrap 4 中将文本换行到图像下的正确方法？

Question

使用Bootstrap 4 alpha 6，我想展示一个推荐，包括：

左边：人物照片
右侧：报价、名称和公司徽标（左对齐）

这是平板电脑和桌面的宽度。但是，当 window 宽度缩小时，我想堆叠集合，以便图像 在文本集合的顶部 ，并且每个部分都居中对齐。

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

<!-- 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) 这意味着即使在桌面宽度处文本也居中，这是不合适的...

我对正确的方法感到困惑，whether/when 我应该使用 img-fluid 还是固定宽度的图像等。我可以根据浏览器以不同方式对齐文本 width/breakpoint ？

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

怎么走？

Answer 1

"correct" 方法是主观的，但您可以使用响应实用程序更改不同断点处的文本对齐方式。 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

在 Bootstrap 4 中将文本换行到图像下的正确方法？

Correct way to wrap text under image in Bootstrap 4?

css

twitter-bootstrap

twitter-bootstrap-4