CSS Twitter bootstrap 媒体网格：如何为缩略图添加标题

Twitter bootstrap media-grid: How to add a caption to the thumbnails

提问by shergill

I am using twitter bootstrap and the 'media-grid' feature to display some thumnabils of images. Here is what it looks like right now: http://jsfiddle.net/vXMMA/

我正在使用 twitter bootstrap 和“媒体网格”功能来显示一些图像缩略图。这是它现在的样子：http: //jsfiddle.net/vXMMA/

What I would like to do is add a caption to these thumbnails.. can someone offer some idea on what changes to CSS I would need to make to enable this.

我想做的是为这些缩略图添加一个标题..有人可以提供一些关于我需要对 CSS 进行哪些更改才能启用此功能的想法。

采纳答案by diEcho

HTML

HTML

  <li>
    <a href="#">
        <legend >Caption</legend>
        <img class="thumbnail" src="http://placehold.it/140x90" alt="">
    </a>
  </li>

CSS

CSS

legend { margin:3px; text-align:center;width:100%}

Working DEMO

Working DEMO

回答by Andres Ilich

The latest bootstrap comes with a .captionclass that you can add to your thumbnail grid, you can place it above or below your media grid quite easily and it works like so:

最新的引导程序带有一个.caption类，您可以将其添加到缩略图网格中，您可以很容易地将其放置在媒体网格的上方或下方，其工作方式如下：

<ul class="thumbnails">
    <li class="span2">
      <div class="caption">
        <h5>Caption above</h5>
      </div>
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    </li>
    <li class="span2">
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
      <div class="caption">
        <h5>Caption below</h5>
      </div>
    </li>
    <li class="span2">
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
      <div class="caption">
        <h5>Caption below</h5>
      </div>
    </li>
    <li class="span2">
      <div class="caption">
        <h5>Caption above</h5>
      </div>
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    </li>
</ul>
<hr>

<ul class="thumbnails">
    <li class="span4">
    <div class="caption">
      <h5>Caption above</h5>
    </div>
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    </li>
    <li class="span4">
      <a class="thumbnail" href="#">
        <img alt="" src="http://placehold.it/160x120">
      </a>
    <div class="caption">
      <h5>Caption below</h5>
    </div>
    </li>
</ul>

You can center the caption inside the image container by just modifying the .captionclass and adding the text-align: centerproperty, like so:

只需修改.caption类并添加text-align: center属性，您就可以在图像容器内居中显示标题，如下所示：

.caption {
    text-align:center;
}

Demo: http://jsfiddle.net/2BBnR/

演示：http: //jsfiddle.net/2BBnR/

NoteNoticed this post is old, so the other method posted is irrelevant with the latest bootstrap, the .media-gridclass is no longer used.

注意注意到这个帖子是旧的，所以发布的另一个方法与最新的引导程序无关，.media-grid不再使用该类。

回答by Ian

Just use the <legend>tag before or after each image, and add the text-align:centerstyle to the image grid.

只需<legend>在每个图像之前或之后使用标签，并将text-align:center样式添加到图像网格中。

See this demo, it works great.

看到这个演示，它工作得很好。