使用bootstrap在连续图像下面的文本

Question

在一行中，每张图像下面有5个图像和文本，这些图像和文本是响应性的。但是当在引导程序中编码时，图像在调整窗口大小时会重叠。

我们如何将5个图像水平对齐，每个图像都有下面的文字。

这是图像和文字的模型。有没有办法在其中制作5张带有文字的图像。

Answer 1

您可能需要使用<figure>和<figcaption>：

<figure>
  <img />
  <figcaption>Image</figcaption>
</figure>

<强>段

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="container">
  <div class="row text-center">
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" alt="">
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" alt="">
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" alt="">
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" alt="">
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" alt="">
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" alt="">
        <figcaption>Hello</figcaption>
      </figure>
    </div>
  </div>
</div>

预览