中心对齐的响应图像第2部分的左对齐标题

Question

@ partypete25和其他任何人都可以帮忙！

感谢：

左对齐标题用于中心对齐的响应图像

和

https://jsfiddle.net/mk7on98L/19/

它也为我工作！ 但是，我似乎在图像下面没有多行文本。 我尝试使用BR并添加更多行文本，但出现了错误。 关于多行文本，在每行文本的末尾带有BR的任何建议？ 谢谢！

我正在尝试使用这样的东西：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <span class="text-center center-block" style="max-width:100%">
        <span data-caption="line 1 of text <br> line 2 of text <br> line 3 of text" class="img-wrapper text-left">
          <img class="img-responsive" src="http://placehold.it/350x150">
        </span>
      </span>
    </div>
  </div>
</div>

问候，

Answer 1

我认为您在这两个方面很难。 只需将标题与图像分开即可。

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <span style="width:100%; margin:0 auto;">
          <img class="img-responsive" src="http://placehold.it/350x150">
      </span>
      <span class="caption">line 1 of text <br> line 2 of text <br> line 3  of text</span>
    </div>
  </div>
</div>

Answer 2

对于多行，您需要在.img-wrapper上指定宽度