使用引导程序连续图像下方的文本[关闭]

Posted 2023-03-05

【中文标题】使用引导程序连续图像下方的文本[关闭]

【英文标题】：text below images in a row using bootstrap [closed]

【发布时间】：2016-04-23 12:45:14

【问题描述】：

连续有 5 个图像和每个图像下方的文本是响应式的。但是当在引导程序中编码时，当窗口调整大小时，图像会重叠。

我们如何将 5 张图片水平对齐，每张图片下方都有文字。

这是图像和文本的模型。有没有什么方法可以使 5 个带有下面文本的图像响应。

【问题讨论】：

我最近了解到 Bootstrap 的 thumbnails 非常适合这样的事情。

【参考方案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" >
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" >
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" >
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" >
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" >
        <figcaption>Hello</figcaption>
      </figure>
    </div>
    <div class="col-xs-2">
      <figure>
        <img src="http://placehold.it/100?text=IMG" >
        <figcaption>Hello</figcaption>
      </figure>
    </div>
  </div>
</div>

预览：

【讨论】：

调整大小时，图像在小型设备中重叠。有什么方法可以使其在所有设备中都响应？

嗨@diya。是的，你可以给col-sm-2而不是col-xs-2。

@diya 成功了吗？

是的。它有效。非常感谢。