html - Bootstrap 缩略图 - 中心内容(img + 标题)，标题 float :left

Question

你好，

这是我正在尝试做的:

将每个缩略图的内容(img + 标题)居中。我的 img 必须是 span3，标题必须是 span4。

这是我的问题:

我可以获取内容中心，或者标题 float 在 img 旁边；但我不能同时获得两者。

我今天早上开始使用 bootstrap，所以我猜我用错了一些类。

这是我的代码:

<ul class="thumbnails">
    <li class="span12">
        <div class="thumbnail span12">
            <img class="span3" data-src="holder.js/300x200" alt="300x200">
            <div class="caption span4">
                <h3>My Title</h3>
                <p>blabla</p>
            </div>
        </div>
    </li> 
</ul>

Answer 1

Slake，根据我对 bootstrap 的一点经验，你必须创建一个包含 div 来设置整体布局。查看 Bootstrap 文档 - 布局部分 here .例如，

<!-- wrap your twitter stuff in -->
<div class="container"></div>

此外，看看这个很有帮助 w3resource tutorial使用 twitter bootstrap 创建缩略图。按照本教程，我很快就能够创建您尝试设置的缩略图网格的基本示例。你可以摆弄代码 here .

复制部分示例代码(更多内容在上面的链接中):

<div class="container">
    <ul class="thumbnails">
        <li class="span12">
           <div class="thumbnail">
               <div class="span3 offset2"><img src="http://lorempixel.com/300/200/sports/5" alt="300x200"></div>
            <div class="span5">
                <h3>My Title</h3>
                <p>blabla</p>
            </div>
            </div>
        </li>
    </ul>
</div>