twitter-bootstrap 使用引导程序在图像下方连续显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34853158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text below images in a row using bootstrap
提问by diya
In a row there are 5 images and text below each image which is responsive.but when coded in bootstrap the images are overlapping when window is resized.
在一行中，每个图像下方有 5 个图像和文本，它们是响应式的。但是当在引导程序中编码时，当窗口调整大小时，图像会重叠。
how can we align 5 images horizontally in a row with each having text below.
我们如何将 5 张图像水平对齐，每张图像下方都有文字。
Here is model of images and text.Is there any way to make 5 images with text below in it responsive.
这是图像和文本的模型。有什么方法可以使 5 个带有下面文本的图像具有响应性。
回答by Praveen Kumar Purushothaman
You might need to use <figure>and <figcaption>:
您可能需要使用<figure>和<figcaption>：
<figure>
<img />
<figcaption>Image</figcaption>
</figure>
Snippet
片段
<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>Preview:
预览：
