在Bootstrap 4中在图像下包装文字的正确方法? [英] Correct way to wrap text under image in Bootstrap 4?

问题描述

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

Using Bootstrap 4 alpha 6, I want to show a testimonial, comprising:

• 在左侧:人物照片
• 在右侧:报价，名称和公司徽标(左对齐)

即平板电脑和台式机的宽度.但是，当窗口宽度缩小时，我想堆叠该集合，以使图像位于文本集合的顶部，并且每个部分都居中对齐.

That is at tablet and desktop width. But, when the window width shrinks, I want to stack the set, so that the image is on top of the text set, and each part becomes center-aligned.

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

Currently, this is my code...

<!-- 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>

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

This successfully produces the following outcome at desktop width...

但是，当收缩时，排列看起来像这样……

However, when shrunk, the arrangement looks like this...

相反，我希望图像位于顶部，而不是包裹起来，最好居中.下面的文本最好居中.

Instead, I would like the image to go on top, rather than be wrapped, and preferably be centered. The text below should preferably be centered.

该代码是媒体对象.

我还尝试使用两列来完成此操作-宽度为2，另一列为10 ...

I have also tried using two columns to accomplish this - one of width 2, the other of 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>

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

... This successfully produces the right-looking result at mobile width...

...但是，a)我不确定此标记是否正确，并且b)这意味着即使在桌面宽度处文本也居中，这是不合适的...

... However, a) I'm not sure whether this mark-up is correct, and b) This means the text is centered even at desktop width, which is inappropriate...

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

I'm getting confused about the right approach, whether/when I should use img-fluid versus a fixed-width image etc. Can I have text be aligned differently depending on the browser width/breakpoint?

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

The d-flex/mr-auto stuff, I am not wedded to. This was copied from Bootstrap 4 documentation code for the media object.

怎么走?

推荐答案

正确"的方法是主观的，但是您可以使用响应实用程序来更改不同断点处的文本对齐方式. text-md-left 将使项目在较大的屏幕上保持对齐，然后使用 text-center 在较小的屏幕上居中.

The "correct" approach is a subjective, but you can use the responsive utilities to change the text alignment at different breakpoints. text-md-left will keep item left align on larger screens, and then use text-center to center on smaller screens.

<!-- 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中在图像下包装文字的正确方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！