使用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>

预习: